CSS3转换
简介
CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
转换( transform) 你可以简单理解为变形。只能转换由盒模型定位的元素（display: block;）。
- 移动：translate
- 旋转：rotate
- 缩放：scale
- 倾斜：skew
- 矩阵变换：matrix
3D 特点
- 近大远小。
- 物体后面遮挡不可见
三维坐标系
- x轴：水平方向，
右边是正值，左边是负值 - y轴：竖直方向，
下面是正值，上面是负值 - z轴：垂直屏幕，往
外面是正值，往里面是负值
透视
- 如果想要在网页产生 3D 效果，需要透视。
- 父盒子有了透视才能看到 Z轴 方向引起的变化。
- 透视也称为视距，就是人的眼睛到屏幕的距离。
- 透视越小，在电脑平面成像越大，立体感更好；透视越大，在电脑平面成像越小。
/* 透视需要写在被观察元素的父盒子上面*/
/* 透视的单位是像素 */
perspective: 200px;
translate移动
- 沿着X、Y轴移动元素
- 元素依然会占据其原始空间，不会影响网页其它元素的布局
- 移动距离设为，百分比是相对于自身
- 对行内标签无效
2D移动
translate(x,y) 定义 2D 移动，沿着 X 和 Y 轴移动元素
translateX(n) 定义 2D 移动，沿着 X 轴移动元素
translateY(n) 定义 2D 移动，沿着 Y 轴移动元素
3D移动
translate3D(x,y,z) 定义 3D 移动
translateX(x) 定义 3D 移动，仅使用用于 X 轴的值
translateY(y) 定义 3D 移动，仅使用用于 Y 轴的值
translateZ(z) 定义 3D 移动，仅使用用于 Z 轴的值
rotate旋转
- 设置元素转换的中心点。语法：transform-origin: x y;
- rotate里面跟度数，单位是 deg，比如rotate(45deg)
- 角度为正时，顺时针旋转；角度为负时，逆时针旋转
- 默认旋转的中心点是元素的中心点
- 不影响其他盒子的布局
2D旋转
rotate(deg) 定义 2D 旋转，在参数中规定角度,以Z轴为旋转轴
3D旋转
rotate3D(x,y,z,deg);
rotateX(deg) 函数功能等同于rotate3D(1,0,0,par) 以X轴为旋转轴
rotateY(deg) 函数功能等同于rotate3D(0,1,0,par) 以Y轴为旋转轴
rotateZ(deg) 函数功能等同于rotate3D(0,0,1,par) 以Z轴为旋转轴
scale缩放
2D缩放
scale(x,y) 定义 2D 缩放，改变元素的宽度和高度
scaleX(n) 定义 2D 缩放，改变元素的宽度
scaleY(n) 定义 2D 缩放，改变元素的高度
3D缩放
scale3D(x,y,z) 定义 3D 缩放
scaleX(x) 定义 3D 缩放，通过给定一个 X 轴的值
scaleY(y) 定义 3D 缩放，通过给定一个 Y 轴的值
scaleZ(z) 定义 3D 缩放，通过给定一个 Z 轴的值
skew倾斜
该函数定义了一个元素在二维平面上的倾斜转换，可用于实现平行四边形
- skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）
- skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）
- skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
转换综合写法
transform: translate(50%,.50%) rotate(45deg) scale(2);
- 同时使用多个转换，其格式为：
transform: translate(50%,.50%) rotate(45deg) scale(2); - 其顺序会影转换的效果。先旋转会改变坐标轴方向。
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前。
matrix矩阵变换
matrix()是CSS的transform的一个基础属性，用它可以实现很多高级、复杂的效果，实际上transfrom的translate、rotate等都是在matrix的基础上实现的简化版的语法。
CSS 函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。
