css3制作立方体

这周在逆战班学习了利用html，css如何实现整页制作，还有css3的一些知识，这里我就说一下如何用css3实现一个简单的立方体。
首先我先在vscode上建立好文件，然后第一步先写好html结构，这个结构非常简单，这里我讲的是一个正方体，因为一个正方体有六个面，所以可以利用ul列表来实现：

• 
  
• 1
• 
  
• 2
• 
  
• 3
• 
  
• 4
• 
  
• 5
• 
  
• 6
• 
  

这里是六个li，我就用它们来做成六个面，接下来就是写css样式
首先我先去掉标签的默认样式，因为默认样式会影响到实际效果，需要什么效果自己再写就可以了，因为结构非常简单，所以就写两行代码就可以了：
*{margin：0；padding：0；}去掉标签默认的外边距和内边距
ul{list-style:none;} 去掉列表中前边默认的小点
接下来就是正式开始写样式：
#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;}先给父容器加上宽高，边框，方便接下来的对比，然后让整个盒子处于浏览器水平居中向下30像素，这样我看着比较舒服，不加也可以
#box ul{ width:100px; height:100px; margin:100px; position: relative;}然后给ul也加上宽高，这里是100px，让后外边距100px就可以让他处于盒子中间了，在加上相对定位，因为我的六个面要相对ul移动
#box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px; }
随后我开始写li的样式，同样加上宽高，让它和父容器相同就可以了，这里加上绝对定位，left，top都是0，由于这里我是加给了所有的li，所以现在6个li就是叠加在一起的，然后我让文字整体居中，同时放大字体，看的更清楚舒服一点，接下来对每个li进行操作
#box ul li:nth-of-type(1){ background:red;}立方体六个面有两个面是面向我的，所以这里第一个页面就加个背景色不动了，加背景色是为了方便观察
#box ul li:nth-of-type(2){ background:blue; left:100px; transform-origin:left; transform:rotateY(90deg);}
第二个面先向右移动100px，这里因为它之前是正处于ul中间，同时和ul一样是100px，所以向右移动100px就直接整个出来了，同样加上不同的背景色，下边这两条就是css3的语法了，意思就是以这个方块的左侧那条边为基点绕y轴旋转90度，所以这个面就转到电脑屏幕里面哪个方向同时垂直于电脑平面
#box ul li:nth-of-type(3){ background:green; left:-100px; transform-origin:right; transform:rotateY(-90deg);}
同理，这里就是向左移动，同时向y轴旋转90度，由于这里逆时针，处于第二象限所以是-的90度
#box ul li:nth-of-type(4){ background:hotpink; top:-100px;
transform-origin:bottom; transform:rotateX(90deg);
}然后这里就是向上
#box ul li:nth-of-type(5){ background:gray; top:100px;
transform-origin:top; transform:rotateX(-90deg);
}这里是向下
#box ul li:nth-of-type(6){ background:yellow;
transform:translate3d(0,0,-100px) rotateY(180deg);
}最后处理下面向我们的面，同样是css3的语法，让它沿z轴向里位移100px，由于平面都是顺着铺下去的，所以此时这个面的文字是反过来的，只需要让它沿y轴旋转180du就可以了
这样在我们想象中的立方体就拼接成了，但是现在的视角看起来他还是一个平面，需要进行最后的处理，首先要在容器上加上景深perspective,这个语法就相当于给人带了个3d眼镜，但是这里要注意，它仅仅对平面有足够的效果，而现在针对立方体仅仅是这个语法就不行了，还需要加上transform-style: preserve-3d;，就能看到这个立方体了然后接下来还可以调整景深基点，比如perspective-origin: right top;就可以同时看到当前面和上右两个面，这里我把语法在写下：
#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;
perspective: 500px;perspective-origin: right top;}
#box ul{ width:100px; height:100px; margin:100px; position: relative;
transition: 4s;transform-style: preserve-3d;transform-origin: center center -50px;}接下来在这里加上transtion:4s;过渡时间，以及旋转基点，因为立方体现在是默认以第一个面为基点的，所以这里需要把z轴的基点也写上，x轴y轴可以用英文，z轴只能用数字，这样立方体就可以沿自己的几何中心旋转了
#box:hover ul{ transform:rotateY(360deg); }
最后加上hover伪类，当鼠标移入的时候立方体就可以沿y轴在4s钟转过360度，立方体就彻底实现了。