Question

我正在尝试使用css3创建一个3D立方体，我已经拥有了立方体，但它只是从一个角度看起来正确（就像一个立方体）：

我也已将代码上传到JSFiddle：http://jsfiddle.net/Fb3Uj/

任何可以提供帮助的人？

提前致谢

/* 3D Cube */
#container{
position: absolute;
margin: 120px;
width: 30%;
height:280px;
border:1px dashed red;
-webkit-perspective:600px;
perspective:600px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform: rotateX(30deg);
transform: rotateX(30deg);
/* perspective-origin: 50% 600px; */
}

.cubepart{
position: absolute;
height: 200px;
width: 200px;
border:2px solid black;
opacity: 0.8;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility:none;
backface-visibility:none;
}

#front{
background: slategrey;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}

Answer 1

http://jsfiddle.net/Fb3Uj/2/

我已更新您的jsfiddle以显示您的代码应该是什么样的。

你应该有另一个DIV只包含容器之外的多维数据集。

<div id="container">
    <div id="cube">
        <div class="cubepart" id="front">front</div>
        <div class="cubepart" id="back">back</div>
        <div class="cubepart" id="left">left</div>
        <div class="cubepart" id="right">right</div>
        <div class="cubepart" id="top">top</div>
        <div class="cubepart" id="bottom">bottom</div>
    </div>
</div>

这样，您可以将透视放在容器上，并将变换放在多维数据集上。

#container{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 50px auto;
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}
#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(30deg);
}

旋转时的CSS 3D立方体透视图

1 个答案: