0

立方体の面を2回回転させ、その1つの面を片側で平らにしたいと思います。

これが私が達成しようとしていることについての実例です：http：
//i.imgur.com/00yAQ.png

私は今ここに持っているものを置きます。90度は形を隠すので、進行状況を示すために45度を使用していることに注意してください。 http://jsfiddle.net/s6jwC/1/

<div id="stage">
    <div id="cube">
        <div id="cube_content">
        </div>
    </div>
</div>

#stage {
    -webkit-perspective: 400px;
    position: relative;
}

#cube {
    width: 128px; height: 128px;
    -webkit-transform: rotateY(45deg);   
    position: absolute;
   left: 200px; top: 30px;
}

#cube_content {
    width: 128px; height: 128px;
    -webkit-transform: rotateX(45deg);
    position: absolute;
    left: 0; top: 0;
    background: rgba(255, 0, 0, 0.7);
    -webkit-transform-origin: 0% 100%;
}

ありがとうございました！

4

1 に答える 1

1

OK、3D変換についてもっと学ぶことで答えを見つけました。-webkit-transform-style属性を親の変換された要素に適用して、子が親の保存された3D状態を使用できるようにすることになりました。

この行を追加すると、私の問題が解決します。

#cube {
    ...
    -webkit-transform-style: preserve-3d;
}

変更が適用された更新されたjsfiddleは次のとおりです：http： //jsfiddle.net/s6jwC/3/

于 2012-11-06T16:02:09.070 に答える