CSS之transform 2D 与 3D 转换（十五）

该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项。

1、transform 属性

在 CSS 中，利用 transform 这个属性实现对元素进行旋转，缩放，倾斜或平移；
 
transform 属性的值可以是 none 或一个或多个 css 变换函数；
 
transform 的值不是 none 时，元素会创建自己的层叠上下文。

1.1、transform 的 2D 变换函数

属性值	描述	实例
translate(x,y)	x，y 为长度单位,可以是 px，也可以是百分比%， x 表示元素在 x 轴上的移动量 y 表示元素在 y 轴上的移动量，如果 y 值不写，则默认为 0，例如 translate(10px)表示 translate(10px,0)	transform:translate(100px,200px)
translateX(x)	x 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 x 轴上的位移量	transform:translateX(300px)
translateY(y)	y 为长度单位，可以是 px，也可以是百分比% 表示元素在平面 Y 轴上的位移量	transform:translateY(200px)
rotate(ax)	ax 代表旋转的角度 正角表示顺时针旋转 负角表示逆时针旋转	transform:rotate(30deg)
scaleX(x)	x 数字类型，表示元素在 x 轴上的缩放比	transform:scaleX(2)
scaleY(y)	y 数字类型，表示元素在 y 轴上的缩放比	transform:scaleY(2)
scale(x,y)	x 数字类型，表示元素在 x 轴上的缩放比 y 数字类型，表示元素在 y 轴上的缩放比 当只有 x，没有 y 时，则 y 默认为 x，元素在 x，y 轴上均匀缩放	transform:scale(2,3)
skew(ax,ay)	ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度 ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度	transform:skew(30deg,30deg)
skewX(ax)	ax 表示一个角度，表示沿着 x 横坐标扭曲元素的角度,形成水平拉伸效果	transform:skewX(30deg)
skewY(ay)	ay 表示一个角度，表示沿着 y 纵坐标扭曲元素的角度，形成垂直拉伸效果	transform:skewY(30deg)

1.2、transform 的 3D 转换属性值

属性值	描述	实例
translateZ(z)	z 为 px 长度单位 元素在 3D 空间 z 轴方向上的位移量	transform:translateZ(200px)
translate3d(x,y,z)	x，y，z 分别为 px 长度单位， x 表示元素在 x 轴坐标上的位移量， y 表示元素在 y 轴坐标上的位移量，z 表示元素在 z 轴坐标上的位移量，该值不能使用百分比，如果使用会被认为是无效属性	transform:translate3d(50px,30px ,50px)
rotateX(ax)	表示元素绕X轴旋转一定的角度 ax 表示度数，可以为正，也可以为负	transform:rotateX(30deg);
rotateY(ay)	表示元素绕Y轴旋转一定的角度 ay 表示度数，可以为正，也可以为负	transform:rotateY(30deg)
rotateZ(az)	表示元素绕Z轴旋转一定的角度 ax 表示度数，可以为正，也可以为负	transform:rotate(30deg);

2、2D 转换

注意：

• 元素的左上角坐标为 （0，0）；
• （0，0）坐标的右方，为 x 轴的正方向；
• （0，0）坐标的下方，为 y 轴的正方向。

2.1、translate 位移

css 中通过给transform添加translate(x,y)或translateX(x)或translateY(y)来实现元素的水平或垂直位移。

属性值	描述	举例
translate(x,y)	实现元素水平和垂直位移量	translate(30px,50px)
translateX(x)	实现元素水平位移量	translateX(30px)
translateY(y)	实现元素垂直位移量	translateY(50px)

2.1.1、translate(x,y)

x 和 y 是长度值 length，可以是 px，也可以是%百分比；
 
x 表示元素在 x 轴上的位移量，为正表示向右移动，为负表示向左移动；
 
y 表示元素在 y 轴上的位移量，为正表示向下移动，为负表示向上移动；
 
位移和相对定位非常像，位移变形也会 “老家留坑”，即会占据原来的位置；
 
同时不会对其它元素造成影响，相当于悬浮在其它元素上面。

/* x,y 为px长度单位 */
transform: translate(50px, 50px); /* 元素水平向右移动50px，向下移动50px */

/* x,y 为%百分比 */
/* 在标准盒子模型下：
	水平位移 =（width + 左右 padding + 左右 border) * x%
	垂直位移 =（height + 上下 padding + 上下 border) * y%
*/
transform: translate(50%, 50%);

/* y 值不写，默认为0：
	transform:translate(10px) 等同于 transform:translate(10px,0)
	只有x发生位移，y轴上不发生移动
*/
transform: translate(10px);

2.1.2、translateX(x) 和 transl