0

我想将一个立方体的一个面旋转两次，并让那个面在一侧平放。

这是关于我要实现的目标的说明：http:
//i.imgur.com/00yAQ.png

我现在把我所拥有的东西放在这里，注意我使用 45 度来显示我的进度，因为 90 度隐藏了形状。 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

好的，通过了解有关 3d 变换的更多信息找到了答案。它将 -webkit-transform-style 属性应用于父转换元素，以便子元素能够使用其父元素保留的 3d 状态。

添加这一行解决了我的问题：

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

这是应用了更改的更新 jsfiddle：http: //jsfiddle.net/s6jwC/3/

于 2012-11-06T16:02:09.070 回答