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