css3多重3d旋转答案

【问题标题】：css3 multiple 3d rotationcss3多重3d旋转
【发布时间】：2013-09-05 13:27:43
【问题描述】：

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

这是我想要达到的目标的说明：
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%;
}

谢谢！

【问题讨论】：

标签： google-chrome css webkit webkit-transform

【解决方案1】：

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

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

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

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

【讨论】：