親コンテナーで CSS3 の 3D 回転を実行しようとしています。視聴者の視点から見て、子どもたちは「フラット」であってほしいと思っています。子に回転を適用すると、何かが変化します。つまり、ある程度回転していますが、正しくはありません。私の問題は、perspective-origin または transform-origin のいずれかに関係していると確信していますが、どちらの値を設定して解決するかはわかりません。問題を示すためにフィドルを作成しました。
http://jsfiddle.net/bobsmells/ndn83/2/
確認のために、子 div が同じ 3D 空間に存在することを望みます。つまり、右側の div は遠くにあるため小さく表示されますが、両方の子が回転しないようにします。
<div class="grandparent">
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
.grandparent{
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% 50%;
}
.parent {
position: relative;
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotateY(30deg) ;
}
.child1 {
position: absolute;
top: 20px;
left: 20px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
.child2 {
position: absolute;
top: 20px;
left: 120px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}