<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D旋转正方体</title>
<style type="text/css">
body{width: 100%;}
*{margin: 0px;padding: 0px;}
#div0{
transform-style: preserve-3d;/*构建3D立体图形必须设置preserve-3d*/
perspective: 1000px;
perspective-origin: 800px 0px;
/*可设置X\Y方向的视角，Z方向由perspective()决定。*/
width:50%;margin: 100px auto;
animation-name: rotate3D;
animation-delay: 1s;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.div1{width: 300px;height: 300px;border: 1px solid red;
transform-origin:left top; position: absolute;}
#back{background: rgba(100,100,100,0.5);}
#top{transform: rotateX(90deg);background: rgba(0,0,220,0.5);}
#bottom{transform:rotateX(90deg) translateZ(-300px);
background: rgba(0,230,130,0.5);}
#front{transform: translateZ(300px);background: rgba(100,0,100,0.5);}
#left{transform: rotateY(-90deg);background: rgba(100,100,0,0.5);}
#right{transform: rotateY(-90deg) translateZ(-300px);background: red}
@keyframes rotate3D{
from{transform: rotate3d(0,0,0);}
to{transform: rotate3d(1,1,1,360deg);}
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
项目重点：
1、学习掌握3D图形的transform变形，包括rotate 3D旋转，translate 3D移位。
2、学习掌握perspective的用法，包括perspective-orgin（X,Y）的用法，及perspective（xxpx）的用法。前者用于设置观看点，通过不同位置的观看能够看到不一样的立体图形，X代表X轴方向的位置，Y代表Y轴方向的位置；Z方向的位置可通过perspective（）来设置，也叫视距。视距越大，立体效果越不明显。
项目难点：
1、首先需要了解X、Y、Z坐标体系，建立一个3D坐标体系。
2、需要了解构建3D立体图形的前提是设置transform-style: preserve-3d;（通过测试，不设置也可以）
具体思路：
第一步：通过对正方体前、后、左、右、上、下六个平面进行transform变形实现正方体的构建；
通过对back平面进行Y轴旋转得到left，通过对back平面进行X轴旋转得到bottom，通过对back进行Z轴方向平移得到front，通过对left进行X轴方向平移得到right。
第二步：通过关键帧动画设置初始状态及结束状态，对正方体旋转进行控制。