CODEWITHSUNDEEP
javascriptjquerycss
CR41G14
CR41G14

Reputation: 5594

Change the transformz property

I need to change 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 the user changes a property on a form I would like to change the translateZ value to add the amount they enter:

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

How do I access the translateZ property of the above without overwriting the rotateX and rotate properties?

Thanks

Upvotes: 4

Views: 1123

Answers (5)

Garret Kaye
Garret Kaye

Reputation: 2562

Heres a javascript solution:

1. convert transformation property of object to a string

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

2. replace the the value that you want transformed

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

3. assign new transformation

myobject.style.transform = finalTransformation;

Done!

Upvotes: 0

couzzi
couzzi

Reputation: 6366

Op,

Firstly, I set up a Plunk that achieves what you ask. Here's 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', ' ');
        }
    });
});

Details

The input has a keydown and keyup event listener. When the users enters a value, it's added to an object, then pushed to the element's style attribute via jQuery's css function. Using an object in this way allows us to set static values and pass a variable—in this case amt— for the translateZ value.

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

Also worth noting, I had to modify the values you originally specified for the transforms as rotateX(-90deg) flips the element on its x-axis in such a way that it becomes invisible. If that is your desired outcome, you can obviously change that back to whatever you see fit.

Hope this helps.

Upvotes: 1

marty
marty

Reputation: 4015

Here is some code that I tried to strip down to the bare 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 the link to jsfiddle

Upvotes: 1

Dom
Dom

Reputation: 40481

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

Example of 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 rotate value: source or demo; unfortunately, this does not include rotateX or rotateY.

Easiest way to go about this would be 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!

Upvotes: 0

dave
dave

Reputation: 4104

Why don't you just append the changed translateZ?

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

results in the same as

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

EDIT: Example of what I mean.

Upvotes: 0

Related Questions