3

親コンテナーで 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) ;
}
4

1 に答える 1

1

親で -webkit-transform-style: preserve-3d を設定する必要があります。祖父母にある場合、子供には影響しません。

(おそらく「カスケード」する必要がありますが、そうではありません)。

一度実行すると、子は親の背後にあるため見えなくなりますが、それは別の話です。親を半透明にすると、それらが表示されます。

于 2013-10-29T08:53:53.763 に答える