##### treehouse : what would you like to learn today?
Web Design Web Development iOS Development

# Forums

Illustration by Nick Sirotich

# need help to understand rotate3d()

• 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:

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?

• 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 ;)