Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用css3转换创建多维数据集_Css_Css Transforms - Fatal编程技术网
Fatal编程技术网
  • css/
  • 使用css3转换创建多维数据集

使用css3转换创建多维数据集

css

使用css3转换创建多维数据集,css,css-transforms,Css,Css Transforms,我正在尝试创建一个“立方体”效果，我可以在三个对象之间切换，并创建旋转立方体的感觉 两面都很好，但我一直在尝试添加第三面。有人能解释一下为什么第三个站点会飘走吗 我猜我在第三项上做错了什么？但我就是不明白 .item-1{ -webkit-transform: translateZ(50px); transform: translateZ(50px); } .item-2{ -webkit-transform: rotateX(-90deg) translateZ(-5

我正在尝试创建一个“立方体”效果，我可以在三个对象之间切换，并创建旋转立方体的感觉

两面都很好，但我一直在尝试添加第三面。有人能解释一下为什么第三个站点会飘走吗

我猜我在第三项上做错了什么？但我就是不明白

.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);
}
实例：

您的
项目似乎是相对定位的。给
.item
一个
位置：绝对的
，一个固定的
宽度
，并在
类上稍微更改
翻译的
值。item
类应该可以解决这个问题。是示例的一个修改版本来说明这一点
 好了：

只需更改.item-3类，如下所示：


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