CSS 第008篇 2D转换 【2属性，5方法（4主+1辅）】

前言：CSS3转换，可以移动、比例化、反过来、旋转和拉伸元素。

属性	变换方法	属性值	描述
transform（变换方法）	translate(位移，单位px)	translate(x,y) 沿着x轴正方向移动x距离 y轴正方向移动y距离 translateX(n) 沿着x轴正方向移动n距离 translateY(n) 沿着y轴正方向移动n距离
	scale（缩放，无单位）	scale(x,y) 更改元素的宽度和高度，将元素的宽度变为原来的x倍，将高度变为原来的y倍 scaleX(n) 更改元素的宽度 scaleY(n) 更改元素的高度
	rotate（旋转，单位为deg）	rotate(x) 围绕z轴旋转，只接受一个参数，并且这个是2d方面的旋转，但是和后面的3d旋转中的围绕z轴旋转有着本质区别 rotateX(n) 围绕x轴旋转 rotateY(n) 围绕y轴旋转
	skew（斜切，单位deg）	skew(x-angle,y-angle) 定义2d倾斜旋转 沿着x轴和y轴 skewX(angle) 如果angle是正值，则沿着x轴正方向偏移斜切，负值则相反 skewY(angle) 如果angle是正值，则沿着y轴正方向偏移斜切，负值则相反	网上大家都把skew叫做斜切，这么喊可能不容易理解，我习惯把它叫做拉伸。 skewX(angel) 就是将元素以旋转基点为坐标原点沿着x轴方向拉伸一定角度 skewY(angel) 就是将元素以旋转基点为坐标原点沿着y轴方向拉伸一定角度
	matrix(矩阵)	接收 6 个参数：a、b、c、d、e、f  其中，x 和 y 表示转换前矩阵偏移元素中心点的坐标；x' = ax + cy + e 和 y' = bx + dy + f 分别表示转换后的坐标。
transform-origin（前面说的旋转基点）	一般填写两个属性值	left top left center left bottom right top right center right bottom center top center center center bottom	transform-origin属性是css变换的一个重要的属性，一般需要设置2个值： 第一个值为偏移x轴方向的距离，可以用关键字left|right|center或者百分比以及具体的距离值描述。 第二个值为偏移y轴方向的距离，可以用关键字top|bottom|center或者百分比以及具体的距离值描述。 第三个值为偏移z轴方向的距离，只能使用具体的距离值描述，这个值是使用在开启了3d模式下使用的，并且不怎么常用，第三个值默认值为0。 Tips:当只设置一个值的时候，那就意味着第二个值默认为center，第三个值默认为0

---

一直在路上，自律，坚持