CSS3 преобразование вращения

Question

Учитывая следующую скрипку, как я могу заставить красный прямоугольник стоять вертикально в вертикальной плоскости?

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

Я пытался изменить преобразование поворота для маркера, но оно вращается вокруг одной и той же оси.

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

Answer 1

Вам необходимо сохранить 3d-преобразования в родительском элементе:

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