Question

我想旋转一个立方体的两次面，并让一面倒在一边。

以下是我想要实现的目标的说明：
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%;
}

谢谢！

Answer 1

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

添加此行可解决我的问题：

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

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

css3多个3d旋转

1 个答案: