<style>
body{
background:pink;
perspective: 800px;/*3D视角,必须在父类元素上加，子代才能是3D视角*/
}
#cotainter{
margin: 100px auto;
position: relative;
transform-style: preserve-3d;/*3D视角，子元素在三维空间内，此处不能用，此处不能用perspective,重复了*/
width:200px;
height:200px;
animation:run 2s linear infinite;
}
@keyframes run {
0%{}
100%{
transform:rotateY(360deg) rotateZ(360deg);
}
}
#cotainter>div{
width:200px;
height:200px;
font-size:40px;
border-radius:10px;/*圆角*/
/*是字居中*/
line-height: 200px;/*内容的高，行高*/
text-align: center;
position:absolute;
top:0;
left:0;
background: rgba(199, 140, 238, 0.5)/*设置颜色(前三个数设置rgb,rgb只能是数字)和透明度(0~1之间的数)*/
}
#one{
transform: rotateX(90deg) translateZ(100px);
}
#two{
transform:translateZ(100px);
}
#three{
transform:rotateY(90deg) translateZ(100px);
}
#four{
transform: rotateY(180deg) translateZ(100px);
}
#five{
transform:rotateY(-90deg) translateZ(100px);
}
#six{
transform: rotateX(-90deg) translateZ(100px);
}
</style>
<body>
<div id='cotainter'>
<div id='one'>1</div>
<div id='two'>2</div>
<div id='three'>3</div>
<div id='four'>4</div>
<div id='five'>5</div>
<div id='six'>6</div>
</div>
</body>
注解：
1.此题需注意分清旋转方向的位移方向，还有具体数字
旋转transform：rotate（角度） roatatex roatatey roatz表示沿着不同的轴旋转
位移transform:translate(位移量) 同样具有xyz
2.background: rgba(199, 140, 238, 0.5)/*设置颜色(前三个数设置rgb,rgb只能是数字)和透明度(0~1之间的数)*/
3. border-radius:10px;/*10像素的圆角*/
4 .动画 设置
animation:run 2s linear 1s infinite;
run表示动画名称，与相面的run对应 2s表示时间 linear表示过渡方式 1s表示延迟时间 infinite表示无限循环播放
@keyframes run {
0%{}
100%{
transform:rotateY(360deg);
}
}
5. perspective: 800px; 3D视角,必须在父类元素上加，子代才能是3D视角 参考文献http://css.doyoe.com/properties/transform/perspective.htm(css手册变换)
6.preserve-3d; 3D视角，子元素在三维空间内，此处不能用，此处不能用perspective,重复了
下面为三维坐标图，方便思考
