Grow your CSS skills. Land your dream job.

need help to understand rotate3d()

  • # 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?

    thanks in advance
    ;)

    # 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.

*May or may not contain any actual "CSS" or "Tricks".