I'm interested to understand CSS3 3d function by experimenting it. between different function for 3d trasnform we have rotate3d() function but it is not clear to me.
for example I want to rotate something 45 deg in X and Y axis.
I can write:
transform: rotateX(45deg) rotateY(45deg);
I tried to use rotate3d function so i wrote:
transform: rotate3d(1,1,0, 45deg);
but the result is not equal !!
in W3C spec we have:
specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied
this definition is not clear. what is direction vector?
how can i write the transform: rotateX(45deg) rotateY(45deg); with rotate3d function and have the same result?
Hi there,
I'm interested to understand CSS3 3d function by experimenting it. between different function for 3d trasnform we have rotate3d() function but it is not clear to me.
for example I want to rotate something 45 deg in X and Y axis. I can write:
transform: rotateX(45deg) rotateY(45deg);
I tried to use rotate3d function so i wrote:
transform: rotate3d(1,1,0, 45deg);
but the result is not equal !! in W3C spec we have:
this definition is not clear. what is direction vector? how can i write the transform: rotateX(45deg) rotateY(45deg); with rotate3d function and have the same result?
thanks in advance ;)
http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/
thanks Paulie_D
I've read this one but I can not reproduce transform: rotateX(45deg) rotateY(45deg); with rotate3d
Then I suggest that you put what you have into a Codepen example and let us play.
This is Codepen example:
http://codepen.io/amirabbas/pen/jxAoh
So, if I understand it correctly, you want the black square to look the same as the grey square?
http://codepen.io/anon/pen/ybILA
yes, exactly ;)