一、transform-origin 属性
设置旋转元素的基点位置，2D 转换元素能够改变元素 x 和 y 轴，3D 转换元素还能改变其 Z 轴。
必须与 transform 属性一同使用，不然不会有任何效果。
1、x-axis（以y轴为旋转中心时，元素（y轴）在x轴上的位置）
定义视图被置于 X 轴的何处。可能的值：
- left
- center
- right
- length
- %
2、y-axis（以x轴为旋转中心时，元素（x轴）在y轴上的位置）
定义视图被置于 Y 轴的何处。可能的值：
- top
- center
- bottom
- length
- %
3、z-axis（以z轴为旋转中心，元素在z轴上的位置）
定义视图被置于 Z 轴的何处。可能的值：
- length
注：length为正负px，%就是百分比。
4、默认值与解释
默认值为
transform-origin:50% 50% 0;
即
transform-origin:x-50%;
transform-origin:y-50%;
transform-origin:x-0px;
也等同于
transform-origin:center center 0px;
第一个值为X，第二个值为Y,第三个为Z。
假设有一个宽高都等于100px的元素，定义它有x、y、z三条轴，x、y轴把元素平分为50*50四份，相当于一个“田”字，中间的“十”字为x、y轴，这就是默认值。
x值为50%(center)，意为当元素要绕着y轴旋转时，y轴在x轴的正中间；如果x值小于0%（为负），y轴会在元素的左侧，如果x值大于100%，y轴会在元素的右侧。
y值为50%(center)，意为当元素要绕着x轴旋转时，x轴在y轴的正中间；如果y值小于0%（为负），x轴会在元素的上面，如果y值大于100%，x轴会在元素的下面。
z值为0px，意为元素在当前的2D位面上不做移动；如果为负，意为在3D空间向里移动，如果大于0，意为在3D空间向外移动。
注：三条轴就像元素旋转时的参照中心，中心可以在元素里面，也可以在外面。（中心在元素内，有点像地球自转，中心在元素外，开起来类似地球绕着太阳公转）。
二、transform-style 属性
规定如何在 3D 空间中呈现被嵌套的元素。
1、flat
子元素将不保留其 3D 位置。
2、preserve-3d
子元素将保留其 3D 位置。
注：
transform-style属性必须与 transform 属性一同使用。
给一个元素设置 transform属性，当transform涉及到3D，元素就会需要一个3D环境，此时就需要给元素的父元素设置transform-style：preserve-3d；。
三、perspective 属性
perspective 属性定义 3D 元素距视图的距离，只影响 3D 转换元素，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
用法：perspective: number;（直接给数字，不给单位）元素距离视图的距离，以像素计。
perspective: none;默认值。与 0 相同。不设置透视。
注：类似模拟人眼看东西时，远了会变小这样子，有点不是很懂，不过透视效果蛮好看。
四、backface-visibility 属性
定义当元素不面向屏幕时是否可见。
1、visible
背面是可见的。当元素旋转180deg，会看见元素内容的反面效果。
2、hidden
背面是不可见的。当元素旋转180deg，会什么也看不见。