CSS transform 三大属性 rotate、scale、translate

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate位移函数

translate 的作用就是平移，参考自己原本的位置来平移。

值	描述
translate(x,y)	定义 2D 转换，相当于水平平移+垂直平移
translate3d(x,y,z)	定义 3D 转换，相当于水平平移+垂直平移+放大
translateX(x)	X 轴的平移，水平方向平移
translateY(y)	Y 轴的平移，垂直方向平移
translateZ(z)	Z 轴的平移，相当于放大

1.transform: translate(100px, 200px);
实际上是水平向右平移100px，垂直向下平移200px。

2.transform: translateX(100px);
实际上是水平向右平移100px。

3.transform: translateY(200px);
实际上是垂直向下平移200px。

rotate旋转函数

rotate的作用就是旋转，旋转该元素，配合着transform-origin属性，transform-origin是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)。

值	描述
rotate(angle)	定义 2D 旋转
rotate3d(x,y,z,angle)	定义3d旋转
rotateX(angle)	定义沿着 X 轴的 3D 旋转
rotateY(angle)	定义沿着 Y 轴的 3D 旋转
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转

1.transform: rotate(45deg);

2.transform: rotateX(45deg);
rotateX() 方法使元素绕其 X 轴旋转给定角度。

3.transform: rotateY(45deg);
rotateY() 方法使元素绕其 Y 轴旋转给定角度。

4.transform: rotateZ(45deg);
rotateZ() 方法使元素绕其 Z 轴旋转给定角度。

scale缩放函数

scale的作用就是缩放，定义倍数缩放，>1 放大， <1 缩小，默认值是 1。

值	描述
scale(x,y)	定义 2D 缩放转换
scale3d(x,y,z)	定义3d旋转转换
scaleX(x)	通过设置 X 轴的值来定义缩放转换
scaleY(y)	通过设置 Y 轴的值来定义缩放转换
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换

1.transform: scale(0.5, 2);
水平方向缩小两倍，垂直方向放大两倍