Forums

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

Home Forums CSS When i rotate an element along x axis size increases?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #152156
    gautam5154
    Participant

    When I rotate my cube from left to right or vice-verse, it fits the size of container. But when i rotate it from top to button it doesn’t fits.

    The above code rotates from left to right. For rotating top to bottom :-
    .cube:hover{
    /transform/
    -webkit-transform:rotateX(-90deg) translate3d(0,-150px,150px);
    -moz-transform:rotateX(-90deg) translate3d(0,-150px,150px);
    -ms-transform:rotateX(-90deg) translate3d(0,-150px,150px);
    -o-transform:rotateX(-90deg) translate3d(0,-150px,150px);
    transform:rotateX(-90deg) translate3d(0,-150px,150px);
    }
    My code Pen

    #152203
    gautam5154
    Participant

    If I remove the perspective, it just transforms 2d. I found the solution to fix it in box.
    .cube:hover{
    -moz- transform:rotateX(-90deg) translate3d(0,150px,150px);
    transform:rotateX(-90deg) translate3d(0,150px,150px);
    }

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.