CSS Transform

CSS3中transform（变形）属性用于设置元素在2D或3D上的旋转、缩放、移动和倾斜

坐标系

transform属性是通过修改CSS视觉格式化模型的坐标空来是实现的，也就是通过修改元素自身的坐标空间，这种修改实际上对应着一个坐标系统映射转换的矩阵。通过变形变换，元素可实现在二维和三维空间内的旋转、偏移、缩放和倾斜。

CSS中的坐标系的方位

坐标轴	描述
X轴 正方向	水平向右
Y轴 正方向	垂直向下
Z轴 正方向	从屏幕到用户

坐标系

transform属性是修改坐标系统，当最终改变的只是元素的视觉渲染，是在元素布局计算后生效的，因此在布局层面上并没有影响。

网页布局实际上遵循的是坐标系统的概念，浏览器在实地渲染和现实页面前都会进行布局计算，以得到网页中所有元素对应的坐标位置。一旦元素的坐标位置或尺寸发生改变，浏览器会重新进行布局计算，重新计算的过程叫做回流（reflow）。一般而言transform变形是不会引发浏览器的回流。

分类

transform属性可分为三部分，分别是前置属性、2D变形函数、3D变形函数。

• 前置属性

前置属性	描述
transform-origin	用于设定元素变形的中心点，默认中心点为元素的正中心。
transform-style	用于指定舞台为2D或3D
perspective	用于指定3D视距
perspective-origin	用于指定视距的基点
backface-visibility	3D舞台背景是否可视，即是否可以看到3D背景。

• 2D 变形函数

2D变形应用在X轴和Y轴上

2D变形函数	描述
rotate	2D旋转
skew	2D扭曲
scale	2D缩放
translate	2D移动
matrix	2D矩阵

• 3D变形函数

2D变形应用在X轴、Y轴、Z轴

3D变形函数	描述
rotate3d	3D旋转
scale3d	3D缩放
translate3d	3D移动
maxtrix3d	3D矩阵

语法

transform: none | <transform-function> [ <transform-function> ] *

transform变形属性可指定为关键字none或一个或多个transfrom-function变形函数，transform-function表示应用到元素上的一个或多个CSS变形函数，变形函数按从左到右的顺序相乘，这意味着复合变形按从右到左的顺序执行。

变形函数

transform: none | rotate | scale | skew | translate | matrix

transform属性实现了一些可用SVG实现的效果，可用于inline内联元素和block块级元素，主要用于动画的制作。

旋转rotate

transform: rotate(<angle>);

• 变形函数rotate通过指定角度参数对元素进行2D旋转
• 旋转前需要设置transform-origin属性，transform-origin属性用于指定旋转的基点。
• 旋转前若没有设置transform-origin属性则默认根据元素的中心点旋转，即center center位置。
• rotate旋转函数参数angle为角度值，单位deg（度数）。
• 旋转角度angle若设置为正数表示顺时针旋转，若设置为负数则表示逆时针旋转。
• 若元素设置了perspective属性则可使用rotate3d变形函数实现三维空间内的旋转

例如：设置元素顺时针旋转45度

transform: rotate(45deg);

demo