今日学习内容：2D转换之位移、旋转（包括旋转原点的设置）、缩放、倾斜；3D转换之位移、旋转、缩放、倾斜。
总结如下要点：
（一）2D转换
（若想看到变换效果，要给图形的盒子设置过渡 transition: 3s）
1.位移
语法 => transform: translate(x,y);
其中x表示水平方向的位移（即左右），y表示垂直方向的位移（即上下）。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素（如100px，-100px），也可以为百分比（如50%，-50%）。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2.旋转
语法 => transform：rotate();
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
3.旋转原点的设置
语法 => transform-origin: x y;
其中x表示水平方向，值可以设置为方位值left，center，right；或者像素px；或者百分数%。
y表示垂直方向，值可以设置为方位值top，center，bottom；或者像素px；或者百分数%。
当x或y的值为负数时，旋转原点在盒子之外。
默认旋转原点为所在盒子的中心点：center center。（x和y之间用空格隔开。）
代码举栗：
风火轮
6.盒子居中的方法总结
盒子居中要用到“子绝父相”。即子元素设置 position: absolute; 父元素设置 position: relative; 然后设置left、top、margin等值：
1）left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
2）lef: 50%;
top: 50%;
margin-left: -自身宽度一半;
margin-top: -自身宽度一半;
3）left: 50%;
top: 50%;
transform: translate(-50%, -50%);
（二）3D转换
1.位移
语法 => transform: translateX() translateY() translateZ();
增加了Z轴属性 transform: translateZ();
括号内的值为正数时，表示离我越来越近，图形变大；值为负数时，表示离我越来越远，图形变小。简称近大远小。
添加translateZ属性后，如果想要看到效果，需要给添加了transform: translateZ()属性的元素的上级元素（不一定就是父盒子）加透视 perspective: 600px; （perspective值一般为600px～1000px）。
添加透视的目的是为了看到近大远小的效果。
2.旋转
语法 => transform：rotateX(20deg) rotateY(20deg) rotateZ(20deg);
需要添加透视、过渡属性来看到效果。
如图，箭头的指向即为要设置为正值的方向。
代码举栗：
前
后