Question

我正在尝试创建一个＆＃34; cube＆＃34;效果，我可以在三个对象之间切换，并创造一个转动立方体的感觉。

双方工作正常，但我试图添加第三个。有人可以解释为什么第三个网站会浮走吗？

我想我对第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并更改translate类的.item值应该可以解决问题。 Here是您的示例的修改版本，以说明这一点。

Answer 2

你去了：

只需更改你的.item-3课程：

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

使用css3-transform创建一个多维数据集

2 个答案: