概念

Transform 字面意思就是变形，改变的意思，该元素应用于 2D 和 3D 转换，该属性允许我们 i 元素进行旋转、缩放、移动和倾斜。在 css3 中 transform 主要包括以下几种：

旋转 rotate、扭曲 skew、缩放 scale和 移动 translate以及 矩阵变形 matrix。

语法

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

• 注意：表示一个或者多个函数变换的时候是以空格分开而不是逗号。

transform 属性实现了一些可用 SVG 实现的同样功能，它可用于内联 (inline) 函数和块级 (block) 元素，它允许我们旋转，缩放和移动元素。他有几个属性值参数：rotate;translate;scale;skew;matrix。
旋转 rotate

旋转 rotate

通过指定的角度参数对原元素指定一个 2D 旋转和 3D 旋转，需先有 transform-origin 属性的定义。transform-origin 定义的是旋转的基点，其中 angle 是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

rotate():2D 旋转
transform: rotate(45deg);

rotateX(): 沿着 X 轴 3D 旋转
transform: rotateX(45deg);

rotateY(): 沿着 Y 轴 3D 旋转
transform: rotateY(45deg);

rotateZ(): 沿着 Z 轴 3D 旋转
transform: rotateZ(45);

rotate3d(x,y,z,angle):3D 旋转，接受四个参数，x,y,z 介于 0 - 1 之间，angle 是旋转的度数。元素围绕着 xyz 在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度，这就是 rotate3D。
transform: rotate3D(1,1,1,45deg);

移动 translate

移动 translate 我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是 X 轴和 Y 轴同时移动）；translateX(x)仅水平方向移动（X 轴移动）；translateY(Y)仅垂直方向移动（Y 轴移动），具体使用方法如下：

• translateX(x)，沿 X 轴位移

translateX(x)，沿 X 轴位移

• translateY(y), 沿 Y 移动

translateY(y) // 沿 y 移动

• ranslateZ(z)，沿 Z 轴位移，需要配合 perspective 属性一起使用

transform: translateZ(20px);

• translate(x, y)，沿 X Y 轴位移

transform: translate(20px,30px);

通过矢量 (x,y) 指定一个 2D translation，x 是第一个过渡值参数，y 是第二个过渡值参数选项。如果未被提供，则 y 以 0 作为其值。也就是 translate(x,y), 它表示对象进行平移，按照设定的 x,y 参数值, 当值为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据 transform-origin 进行改变基点。如 transform:translate(100px,20px):

• translate3d(x, y, z)，沿 X Y Z 轴位移

transform: translate(20px, 20px, 20px);

缩放 scale

缩放 scale 和移动 translate 是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是 X 轴和 Y 轴同时缩放）；scaleX(x)元素仅水平方向缩放（X 轴缩放）；scaleY(y)元素仅垂直方向缩放（Y 轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为 1，如果其值大于 1 元素就放大，反之其值小于 1，元素缩小。下面我们具体来看看这三种情况具体使用方法：

• scale([,])：提供执行 [sx,sy] 缩放矢量的两个参数指定一个 2D scale（2D 缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过 transform-origin 对元素的基点进行设置，同样基点在元素中心位置；基中 X 表示水平方向缩放的倍数，Y 表示垂直方向的缩放倍数，而 Y 是一个可选参数，如果没有设置 Y 值，则表示 X，Y 两个方向的缩放倍数是一样的。并以 X 为准。如：

transform:scale(2,1.5):

• scaleX()：使用 [sx,1] 缩放矢量执行缩放操作，sx 为所需参数。scaleX 表示元素只在 X 轴 (水平方向) 缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过 transform-origin 来改变元素的基点。如：

transform:scaleX(2):

• scaleY()：使用 [1,sy] 缩放矢量执行缩放操作，sy 为所需参数。scaleY 表示元素只在 Y 轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过 transform-origin 来改变元素的基点。如:

transform:scaleY(2):

扭曲 skew

扭曲 skew 和 translate、scale 一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X 轴和 Y 轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X 轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y 轴扭曲变形），具体使用如下:

• skewX(angle) – 沿 X 轴的 2D 倾斜

transform: skewX(45deg);  

• skewY(angle) – 沿 Y 轴的 2D 倾斜

  ransform: skewY(45deg); 

• skew(angle-x, angle-y) – 沿 X Y 轴的 2D 倾斜

  transform: skewY(45deg, 45deg);  

X 轴 Y 轴上的 skew transformation（斜切变换）。第一个参数对应 X 轴，第二个参数对应 Y 轴。如果第二个参数未提供，则值为 0，也就是 Y 轴方向上无斜切。skew 是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么 Y 轴为 0deg。同样是以元素中心为基点，我们也可以通过 transform-origin 来改变元素的基点位置。如：transform:skew(30deg,10deg):

前面我们也提到过 transform-origin 它的主要作用是让我们在进行 transform 动作之前可以改变元素的之前的位置。因为元素的默认中心点就是其中心位置。