CSS3 3D动画-立方体的下落墙

我有一个CSS3 3D动画问题。css类为“css3cube-el”的div放置在容器中，如本例所示：

现在，我想对它进行变换（这是延迟5秒后发生的情况），使它看起来像一堵墙倒在左侧

与此类似，但相应地向左移动：

不幸的是，它以一种奇怪的方式移动（请单击JSFIDLE链接）。最后，底部（红色）被带到容器的前部

你知道如何更改css类“.css3cube left open”吗？是哪个类导致了这个错误的动画？目前看起来是这样的（我多次更改了所有值，但没有达到预期的行为：-（）：

---

提前谢谢你

嗨，好吧，这几乎就是我想要的，但镜像反转，红色边框应该保持在同一位置，而不是向上移动。我试图编辑属性，但此代码也不起作用：-/

-webkit transform:rotateY（-90deg）rotateX（-90deg）translateZ（150px）

现在我几乎拥有了我想要的东西，但仍然…需要优化…

http://jsfiddle.net/cGMCh/1/

。谢谢。请检查。看起来您需要'0 100%`谢谢。由于某些原因，JSFIDLE会过滤

转换原点：'bottom'；

属性，但在我的应用程序中，它正在工作，并且元素底部边缘保留在该位置。解决方案是：

变换原点：中心底部0

。您应该将其作为解决方案发布。它可能会帮助其他人解决相同的问题

.css3cube-left-open {
    transform: rotateX( 90deg ) translateY( 100px );
    -moz-transform: rotateX( 90deg ) translateY( 100px );
    -webkit-transform: rotateX( 90deg ) translateY( 100px );
}