CODEWITHSUNDEEP
css
Sidebp
Sidebp

Reputation: 780

CSS3 rotation transform

Given the following Fiddle, how can I make the red rectangle stand upright in the vertical plane?

http://jsfiddle.net/paulsidebottom/vEWEL/

I've tried altering the rotation transform for the marker but it seems to rotate about the same axis. 

    #marker
    {   
      -webkit-transform:rotateY(-50deg);

Upvotes: 1

Views: 199

Answers (1)

methodofaction
methodofaction

Reputation: 72455

You need to preserve the 3d transformations on its parent:

    .threeD
    {
         -webkit-transform-style: preserve-3d;
         -webkit-transform: rotateX(55deg);
         -webkit-transition: all .5s ease-in-out;
         position:relative;
    }

Upvotes: 1

Related Questions