# Forums

Give help. Get help.

• # January 25, 2013 at 5:54 am

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?

;)

# January 25, 2013 at 6:15 am

thanks Paulie_D

I’ve read this one but I can not reproduce transform: rotateX(45deg) rotateY(45deg); with rotate3d

# January 25, 2013 at 6:19 am

Then I suggest that you put what you have into a Codepen example and let us play.

# January 25, 2013 at 6:26 am

This is Codepen example:

http://codepen.io/amirabbas/pen/jxAoh

# January 25, 2013 at 7:05 am

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

# January 25, 2013 at 7:43 am

yes, exactly ;)

# November 5, 2014 at 11:35 am

This is obvously post mortem but, just for sake of it, the 3d transformation you are looking for is roughly `rotate3d(1, 1, .45, 60deg)`.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.