3D transform

transform进行动画演示时，是以元素的中心为基准点的，可以使用transform-origin改变元素转变的基准点。

所有的transform动作改变都会引起X、Y轴的坐标变化。

perspective：3000px表示我们眼睛距离屏幕3000px时观看到的效果。呈现在显示器中。一般来说perspective属性都应用在父元素上，我们可以把这个父元素称为舞台元素.表透视，近大远小。

transform: translateZ(400px)：立方体前面正对着屏幕，所以不用旋转，只需向Z轴前移动距离。

1、旋转rotateX()，rotateY()

参考的链接：

◆http://www.cnblogs.com/xiaohuochai/p/5350254.html

◆https://www.cnblogs.com/grey-zhou/p/5174114.html

remain：关于rotateX、rotateY的转换角度，绕着X、Y轴旋转后整个坐标会一起旋转，也就是坐标系永远同元素一起变动，每个元素有自己的坐标系，元素的初始状态中，原点在元素的中心。坐标系的方向：X轴方向水平向右，Y轴方向竖直向下，Z轴垂直屏幕，朝向我们，即正对的方向就是自己的Z轴方向，各坐标轴的起点在原点。自己想象3D旋转时，X、Y、Z轴不变，视线垂直屏幕不需要跟着旋转，Z轴方向一定是div正面朝向。

比如说rotateX()、rotateY()在没有设定坐标是以元素的中心为基点，但设置transform-origin后会发生改变。

以下的例子是元素旋转了那Z轴也会一起变动，内和外是相对于Z轴来说的，Z轴方向的是外，反之是内。