Change the transformz property

Question

I need to modify the transformz of an element using jquery. I have a div with css:

.bottom_face { -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(487px); -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(347px); } 

When a user changes a property on a form, I would like to change the value of translateZ to add the amount they enter:

 $('.bottom_face ').css('-webkit-transform') ?? 

How to access translateZ property above without overwriting rotateX and rotating properties?

thanks

Answer 1

Ohr,

First, I installed Plunk , which achieves what you ask. Here is how I did it:

Js

 $('document').ready(function () { $('#amount_to_rotate').keydown(function () { var el = $(".bottom_face"), amt = parseInt($(this).val()); rotZ = { '-webkit-transform': 'rotateX(-9deg) rotate(-10deg) translateZ(' + amt + 'px)', '-moz-transform' : 'rotateX(-9deg) rotate(-10deg) translateZ(' + amt + 'px)', } el.css(rotZ); }).keyup(function () { if ($(this).val().length == 0) { // Return to state given by CSS class $(".bottom_face").attr('style', ' '); } }); }); 

More details

input has a keydown and keyup event keyup . When users enter a value, it is added to the object, and then added to the style attribute of the element through the jQuery css function. Using the object in this way allows you to set static values ​​and pass a variable - in this case, amt - for the value of translateZ .

To be safe, since we are dealing with user input, we santize the input val() , pulling out only numbers: parseInt($(this).val());

It is also worth noting that I had to change the values ​​that you originally specified for the transformations, since rotateX(-90deg) flips the element along the x axis so that it becomes invisible. If this is your desired result, you can obviously change it to whatever you see fit.

Hope this helps.

Answer 2

Here is the code that I tried to hide to a minimum:

 $("#add").click(function() { var z = $("#z").val(); $(".bottom-face").each(function() { var $c = $(this); var css; if (css = $c.css("-webkit-transform")) { // assignment $c.css("-webkit-transform", $c.css("-webkit-transform") + " translateZ(" + z + "px)" ); //console.log( $c.css("-webkit-transform") ); } }); }); 

And a link to jsfiddle

Answer 3

Why don't you just add the modified translation ??

 .bottom_face { transform: translateZ(487px); } 

leads to the same as

 .bottom_face { transform: translateZ(487px) translateZ(-50px) translateZ(50px); } 

EDIT : An example of what I mean.

Answer 4

When you use .css(-webkit-transform) , it will return the value of matrix3d , which makes it very difficult to find the original values.

Example matrix3d :

 matrix3d(-1, 0.00000000000000012095693648649962, -0.000000000000000019157696688784726, 0, -0.00000000000000012246467991473532, -0.9876883405951378, 0.15643446504023087, 0, 0, 0.15643446504023087, 0.9876883405951378, 0, 0, 76.18358447459244, 481.0042218698321, 1) 

You can find the value rotate : source or demo ; unfortunately, this does not include rotateX or rotateY .

The easiest way to do this is to do something like this:

 var _translate = '30px'; $('.bottom_face').css('-webkit-transform', 'rotateX(-90deg) rotate(180deg) translateZ(' + _translate + ')'); 

DEMO: http://jsfiddle.net/SLGdE/21/

Hope this helps!

Answer 5

Here is the javascript solution:

1. convert the property of converting an object to a string

 var currentTransformation = String(myobject.style.transform); 

2. replace the value you want to convert

 var finalTransformation = currentTransformation.replace("translateZ(100px)", "translateZ(YOURVALUEpx)"); 

3. Assign a new transformation

 myobject.style.transform = finalTransformation; 

Done!