转换
定义：
1、转换是使元素改变形状、尺寸和位置的一种效果
2、又称为变形，即，可以向元素应用 2D 或 3D 转换，从而对元素进行旋转、缩放、移动或倾斜
3、2D转换：使元素在 X 轴和 Y 轴平面上发生变化，改变其形状、尺寸和位置
4、3D转换：元素还可以在 Z 轴上发生变化
旋转：
Transform:rotate(30deg);顺时针旋转30°；
Transform:rotate(-30deg);逆时针旋转30°；
缩放：
Transform:scale(2,0.5); x坐标放大2倍，纵坐标缩小0.5倍
Transform:scalte(0.5,2);x轴方向缩小0.5倍，y轴放大2倍；
解决缩放和旋转不能共存的问题：
transform: rotate(-30deg) scale(0.5,2);
设置旋转原点：
用来指定元素的转换原点位置，默认情况下，转换的原点在元素的中心点，或者是 X 轴和 Y 轴的 50% 处
transform-origin : 数值/百分比/关键字;
一个值：表示所有轴的位置
两个值：表示 X 轴和 Y 轴
三个值：表示 X 轴、Y 轴和 Z 轴
transform-origin: 30px;
倾斜：skew（deg）
transform: skew(45deg);
平移：translate
transform:translate(100px);
写在同一行时：一起生效
transform: rotate(-30deg) scale(0.5,2) skew(45deg) translate(100px);
左上角：
transform-origin:0% 0%;左上角
transform-origin:left top;左上角
缩放！！！！：：它缩放了所有，包括像素！！！
旋转！！！！：：它旋转了坐标轴！所有的转换均以旋转后的坐标轴来转换！！
3D
首先：给父标签设置属性：transform-style:perspective-3d;
然后：给需要3D变换的子标签设置属性:transform-style:perspective-3D;
这两步缺一不可
下面正式设置子标签的属性（这里只写关于3D的）：
第一条：设置3D 元素距视图的距离，以像素计
Perspective:(400px)(像素越小代表视角离元素越近，会变大，像素越大，代表视角离元素越远，会变小)
第二条设置3D旋转！起码拉开一个角，使其有3D效果
位移：translateZ(100px);
旋转：rotateX(45deg);
rotateY(45deg);
rotateZ(45deg);
(其一便可)；
倾斜：skew(x)或skew(x,y)取值为角度
缩放：scale(0.5,0.3)取值为0~1的小数，不可百分比！