一、什么是3D
3D是css3新增的属性，增强了css对元素控制的能力。3D相对于2D多出一个Z轴。Z轴可以理解为垂直于屏幕的方向，靠近屏幕的方向是正向，远离与屏幕的方向是反向。
二、3D属性
1、transform-style 属性
指定嵌套元素如何在3D空间中呈现。属性值有 flat 和 preserve-3d。
flat为默认值。
preserve-3d表示所有子元素都在3D空间中呈现。所以此属性是添加在父元素身上。
2、3D位移
位移主要包括translateZ()和translate3d()。translate3d()使一个元素在三维空间中运动。
语法translate3d(tx,ty.ty)
tx:：代表横向坐标方向移动。
ty：代表纵向坐标方向移动。
tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
translateZ(t) 指的是Z轴的向量长度。
3、3D旋转
rotateX()：指定 一个元素围绕X轴旋转，旋转的量被定义为指定的角度。如果为正值绕X轴顺时针旋转，如果为负值绕X轴逆时针旋转。
,rotateY()：指定 一个元素围绕Y轴旋转，旋转的量被定义为指定的角度。如果为正值绕Y轴顺时针旋转，如果为负值Y轴逆时针旋转。
rotateZ()：指定 一个元素围绕Z轴旋转，旋转的量被定义为指定的角度。如果为正值绕Z轴顺时针旋转，如果为负值Z轴逆时针旋转。
旋转单位为 deg
4、3D缩放
CSS3中的3D缩放主要包括scaleZ()。
scaleY(),scaleX()用法与2D用法一致。
5、深景
属性值：perspective:value;（加在父元素上）
生活中看物体都会有近大远小的效果。这就是3D和2D存在区别的地方。value值越大近大远小的效果就会更加明显。
三、纯css实现【正方体的书写】
CSS部分：
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
/*border: 1px solid;*/
margin: 100px auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
position: relative;
animation: ro 3s infinite linear;
}
ul li{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
list-style: none;
}
ul li:nth-child(1){
background: red;
transform: rotateX(90deg) translateZ(100px);
}
ul li:nth-child(2){
background: yellow;
transform: rotateX(180deg) translateZ(100px);
}
ul li:nth-child(3){
background: pink;
transform: rotateX(270deg) translateZ(100px);
}
ul li:nth-child(4){
background: plum;
transform: rotateX(360deg) translateZ(100px);
}
ul li:nth-child(5){
background: greenyellow;
transform: translateX(-100px) rotateY(90deg) ;
}
ul li:nth-child(6){
background: blue;
transform: translateX(100px) rotateY(90deg) ;
}
@keyframes ro{
from{transform: rotateX(-20deg) rotateY(0deg);}
to{transform: rotateX(-20deg) rotateY(360deg);}
}
HTML部分：
<ul>
<li></li>*6
</ul>
