CODEWITHSUNDEEP
javascriptcss
MoYummy
MoYummy

Reputation: 839

How to combine css rotations?

Check out https://jsfiddle.net/u5L1dmvx/

transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(1, 0, 0, 90deg);

Suppose I would like to perform two rotations. First rotate around z axis by 45 degrees and then rotate around x axis by 90 degrees.

How can I combine these two? I mean, this can be two questions.

In math, I would like to know, if I use transform: rotate3d(x, y, z, wdeg);, how to calculate x, y, z and w for the combined effect?

In programming, is it possible to change style of div by js to combine these two? I mean, write code to apply a new rotation on an already rotated div to achieve the combined effect.

UPDATE:

Currently I have a temporary brute answer:

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

But if the rotation operation list is long, style of div could become longer every time an operation is executed:

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

Is there a more elegant way?

Upvotes: 0

Views: 1186

Answers (2)

Max
Max

Reputation: 881

You can combine multiple transformations, even of the same type, like this:

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

If you change the style of the DIV element using JavaScript you would just replace the transform property so you need to get the value first and then append the additional transform, just like in the CSS above.

See also https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Not all combinations of rotate3d transforms can be replaced with a single rotate3d transform. You can however combine multiple transformations into one single matrix transform. I consider that out of scope for this answer but if you are interested then maybe you should have a look here: https://www.khanacademy.org/math/linear-algebra/matrix-transformations#composition-of-transformations

If you want to continue adding transformations later (perhaps interactively?) as you suggest, you can read the current transformation matrix back from the element and combine it with more transformations.

I played around with some JS in your fiddle: https://jsfiddle.net/u5L1dmvx/66/

Here is an example, not the most elegant but it works on my Firefox:

var element = document.getElementById("div1");
var style = window.getComputedStyle(element);

//this will (probably) give you a matrix(..) transform representing the current transform of the element
var currentTransform = document.getElementById("div3").style.transform;

console.log(currentTransform)

//prepend another rotate3d transform to the current transform
document.getElementById("div3").style.transform = "rotate3d(1,0,0,90deg) "+style.transform;

Update: Fixed the broken transform and added example of how to add more transformations.

Upvotes: 1

Cyphall
Cyphall

Reputation: 368

This order worked for me:

transform: rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, 45deg);

Upvotes: 0

Related Questions