css3制作立方体_css 立体长方形-CSDN博客

本文链接：https://blog.csdn.net/weixin_46370270/article/details/104442238

如何简单利用css3中的transform变形操作来实现立方体的制作。

先来说一下思路，大家都知道一个立方体有六个面，所以首先肯定需要在一个容器中画出它的六个面，然后通过位移旋转让六个面分别到达上下左右前后的指定位置，这样一个立方体就出来了。

结构非常简单，就是一个容器内有6个盒子也就是它的六个面。

<body>
    <div id="box">
        <div class="cube">
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="front"></div>
            <div class="behind"></div>
        </div>    
    </div>
</body>

给容器和盒子分别设置一下大小，这里我们做一个宽高为200px的立方体。先将六个面通过定位叠在一起再进行后面的操作。
因为立方体是3d的，可以先把景深perspective和3d空间加上。

#box{ width: 400px;height: 400px;border: 1px solid black;perspective: 600px;} 
.cube{width: 200px;height: 200px;position: relative;margin: 100px;transform-style: preserve-3d;} 
.cube div{ width: 200px;height: 200px; position: absolute;top: 0;left: 0;}

然后开始按上下左右后前的顺序来制作六个面。
这里还需要用到transform-origin，默认情况下transform的基点是元素的中心点，但是通过改变基点位置可以非常容易得到上下左右四个面。
第一个面想要到达上面，就可以直接绕着它的上边界转动90度即可。这里向远离我们的方向转动。

.top{transform-origin: top; transform: rotateX(-90deg) ;background-color: red;}

下面也是一样，只需要绕着它的下边界转动90度即可。跟上面一样，向远离我们的方向移动。

.bottom{transform-origin: bottom; transform: rotateX(90deg);background-color: orange;}

左边同理，绕着左边界向里转动90度。

.left{transform-origin: left; transform: rotateY(90deg);background-color: yellow;}

右边同理，绕着右边界向外转动90度。

.right{transform-origin: right; transform: rotateY(-90deg);background-color: green;}

后面就可以直接通过位移，向里移动200px即可。

.behind{ transform: translateZ(-200px);background-color: purple;}

第六个面不需要移动

.front{background-color: pink;opacity: .5;}

这样就可以得到一个完美的正方体了。

入门小白一枚，培训前端三个星期，逆战班的宝宝们加油！！！