使用 css3-transform 创建立方体

Question

我正在尝试创建一个 "cube" 效果，我可以在其中切换三个对象并创建转动立方体的感觉。

两面都可以正常工作，但我无法尝试添加第三面。谁能解释一下为什么第三个网站会飘走？

我想我对第 3 项做错了什么？但是我就是想不通

.item-1{
    -webkit-transform: translateZ(50px);
    transform: translateZ(50px);
}

.item-2{
    -webkit-transform: rotateX(-90deg) translateZ(-50px);
    transform: rotateX(-90deg) translateZ(-50px);
}

.item-3{
    -webkit-transform: rotateX(-180deg) translateZ(-50px);
    transform: rotateX(-180deg) translateZ(-50px);
}

实例： http://jsfiddle.net/esbeka9t/

Answer 1

您的 .items 似乎彼此相对定位。给 .item 一个 position: absolute，一个固定的 width 并稍微改变 .item 类的 translate 值应该可以解决问题。 Here 是您示例的修改版本以说明这一点。

Answer 2

好了：

只需像这样更改您的 .item-3 class：

-webkit-transform: translateZ(-50px) rotateX(-180deg) translateY(200px);
transform: translateZ(-50px) rotateX(-180deg) translateY(200px)

使用 css3-transform 创建立方体

Creating a cube with css3-transform

css

css-transforms