相对于2D多了一个Z轴，垂直于屏幕
transform属性
transform:向元素应用2D或者3D转换，在3D效果下可结合translate平移,rotate()旋转，skew()扭曲，scale()缩放
transform-origin:被转换元素的中心位置,默认在中心
transform-style:开启3D模式的属性
flat:子元素不保留3D位置
preserve-3d:子元素保留3D位置，开启3D模式
perspective:视点
none:没有3D空间
取值越小，3D效果越明显，0或者无穷大等价于none
perspective-origin:视点的位置
backface-visibility:设置当前元素不面向屏幕是否可见
visible:默认值，可见
hidden:不可见
总的来说3D效果实现纸面上看起来很简单，但需要自己去体会，以下是旋转立方体代码，可以自己尝试写一写，感受一下各个属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3实现旋转立方体</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.box{
400px;
height: 400px;
border: 2px #FF0000 solid;
margin: 100px auto;
perspective: 1200px;/*视点远近*/
}
.box ul{
300px;
height: 300px;
border: 1px #00f solid;
margin: 50px auto;
position: relative;
transform-style: preserve-3d; /*开启3D模式*/
animation: move 2.5s infinite linear; /*animation动画*/
/*旋转的焦点位置，整个正方体围绕哪个焦点旋转，现在是围绕正方体内部中心点 */
transform-origin: center center 150px;
}
.box ul li{
300px;
height: 300px;
font-size: 30px;
color: aliceblue;
text-align: center;
line-height: 300px;
position: absolute;
}
/*调整元素的位置，拼成正方体*/
.box ul li:nth-of-type(1){
background-color: red;opacity:0.4;
}
.box ul li:nth-of-type(2){
background-color: blue;opacity:0.4;
transform: translateX(300px)rotateY(-90deg);
transform-origin: left ;
}
.box ul li:nth-of-type(3){
background-color: yellow;
opacity:0.4;
transform: translateX(-300px)rotateY(90deg);
transform-origin: right;
}
.box ul li:nth-of-type(4){
background-color: green;
opacity:0.4;
transform: translateY(-300px)rotateX(-90deg);
transform-origin: bottom;
}
.box ul li:nth-of-type(5){
background-color: yellowgreen;
opacity:0.4;
transform: translateY(300px)rotateX(90deg);
transform-origin: top;}
.box ul li:nth-of-type(6){
background-color: purple;
opacity:0.4;
transform: translateZ(300px);
}
/*旋转动画*/
@keyframes move{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>