CSS3立体盒子的制作

#3D盒子

效果如下

3d基础知识

• 电脑上游览器绘制的不是真正的3D物体,而是游览器模拟出来的3D,是3d空间在屏幕当中的投影
• 怎么模拟的呢?利用的就是景深,即近大远小的概念.我们绘画领域叫做透视法则,浏览器透视：把近大远小的所有图像，透视在屏幕上
• 如果我们能够模拟这样的效果,我们就可以欺骗我们的大脑,让大脑以为这是一个真实的3D空间,最终我们可以实现3D效果.

轴向

• 前端立体空间坐标系由X,Y,Z轴组成.X和Y轴分别代表水平和竖直的两条轴,Z轴就是由屏幕到眼睛的轴.

现在就开始写我们的代码吧~~

首先是我们的HTML结构,我们这里只写一个立体正方形.

首先一个正方形得有六个相同面上下左右前后,相应我们去写六个html元素.

<div class="cube">
		<div class="small">上</div>
		<div class="small">下</div>
		<div class="small">左</div>
		<div class="small">右</div>
		<div class="small">前</div>
		<div class="small">后