Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS need help to understand rotate3d()

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #42238
    amirabbas
    Participant

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

    #122248
    Paulie_D
    Member
    #122252
    amirabbas
    Participant

    thanks Paulie_D

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

    #122254
    Paulie_D
    Member

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

    #122256
    amirabbas
    Participant

    This is Codepen example:

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

    #122259
    Paulie_D
    Member

    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

    #122265
    amirabbas
    Participant

    yes, exactly ;)

    #187773
    jpdelatorre
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.