如何简单利用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;}
这样就可以得到一个完美的正方体了。
入门小白一枚,培训前端三个星期,逆战班的宝宝们加油!!!