CSS面试考点之transform

transform属性可以实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

1、2D

1）旋转

rotate方法，定义 2D 旋转。在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。

例：transform：rotate（45deg）； 旋转45度。

2）缩放 

scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

例：transform：scale（0.5）；//缩小一半

可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率。

例：transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。

scaleX(x)通过设置 X 轴的值来定义缩放转换。

scaleY(y)通过设置 Y 轴的值来定义缩放转换。

3）倾斜 

skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

例：transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。

skewX(angle)定义沿着 X 轴的 2D 倾斜转换。

skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。

4）移动

translate方法来实现移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

例：transform：translate（50px，50px）；// 水平方向上移动50px，垂直方向上移动50px

只使用一个参数，省略另一个参数。这种情况下视为只在水平方向上移动，垂直方向上不移动。

translateX(x)定义转换，只是用 X 轴的值。

translateY(y)定义转换，只是用 Y 轴的值。

5）变形的基准点

在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。

transform-origin属性可以改变变形的基准点。

例：ransform：rotate（45deg）；

transform-origin：left bottom；// 把基准点修改为元素的左下角

基准点在元素水平方向上的位置：left、center、right；

基准点在元素垂直方向上的位置：top、center、bottom。

2、3D旋转

1）旋转

rotate3d(x,y,z,angle) 定义 3D 旋转。

或者分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。

例：transform：rotate3d(x,y,z,angle)

transform：rotateX（45deg）；

transform：rotateY（45deg）；

transform：rotateZ（45deg）；

transform：rotateX（45deg） rotateY（45deg） rotateZ（45deg）；

transform：scale（0.5） rotateY（45deg） rotateZ（45deg）；

2）缩放

scale3d(x,y,z)定义 3D 缩放转换。

或者分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。

例：transform：scale3d(x,y,z)；

transform：scaleX（0.5）；

transform：scaleY（1）；

transform：scaleZ（2）；

transform：scaleX（0.5）scaleY（1）；

transform：scale（0.5） rotateY（45deg）；

3）倾斜

分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度。

例：transform：skewX（45deg）；

transform：skewY（45deg）；

4）移动

使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。

例：transform：translateX（50px）;

transform：translateY（50px）;

transform：translateZ（50px）;