一个简单的3d场景
3d空间
要想元素位于3d空间，需要设置元素的transform-style
transform-style: preserve-3d;
设置元素的直接子元素是位于 3D 空间中 ，这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它
有了3d空间，我们就可以设置transform相关的属性的3d值了
transform: translateX(100px); //x轴平移
transform: translateY(100px);//y轴平移
transform: translateZ(100px);//z轴平移
transform: rotateX(45deg); //绕x轴旋转
transform: rotateY(45deg); //绕y轴旋转
transform: rotateZ(45deg); //绕z轴旋转
transform: scaleX(2); //x轴缩放
transform: scaleY(2); //y轴缩放
transform: scaleZ(2); //z轴缩放
需要注意的是
旋转是有顺序的，就是 先旋转x轴再旋转y轴 和 先旋转y轴再旋转x轴 结果不一样 平移，缩放操作，如果是先选择 ，再平移，那么 坐标轴是按旋转后来算的，而不是初始时的面向屏幕为z轴
透视
perspective: 800px;
指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
看看下面的示例：一个box 沿z轴平移，可以看到有近大远小的效果，z越大，box越大
可以把这句去掉，运行，可以看到没有近大远小的效果
.scene{
perspective:600px;
}
另外可以搜一下“鸽子为什么这么大” 关键词，看看什么是透视
坐标系
3d空间需要清楚坐标系，上面的示例也可以看到我们画了3个箭头，就是3d空间坐标系
x,y不用说了，z轴是数值越大，越靠屏幕外
绕x轴旋转的效果
先绕Y轴旋转,再平移Z轴的效果，可以看到Z轴并不是刚开始默认的方向，而是旋转后的方向
transform:rotateY(30deg) translateZ(-800px)
效果1
安卓桌面3d翻转
可以看到整体是围绕红色的线旋转，实际上就是画一个盒子，按照盒子的中心点旋转
.box{
transform:translateZ(-150px) rotateY(0deg) translateZ(150px);
}
外面的盒子先往里面平移，再旋转，再平移回来，看起来就是以盒子的中心点旋转
总结
3d下面，最复杂的就是旋转，纯css3d 没有世界坐标的概念，所有的旋转是按照自身来操作的，有一套相关辅助工具来操作会简单很多
第三方实现：
