CSS3 transform

Transform

Transform字面意思就是变形，改变的意思。

Transform主要包括几种：

旋转 rotate

扭曲 skew

缩放 scale

移动 translate

矩阵变形 matrix

语法：

transform : none | <transform-function> [<transform-function>] *
也就是说
transform : rotate | scale | skew | translate | matrix;

none:表示不进行变换；

<transform-function>

表示一个或者多个变换函数，以空格隔开；

换句话说就是我们同时对一个元素进行 transform的多种属性变换，例如rotate、scale、translate，叠加效果用“，”隔开

旋转 rotate

rotate(<angle>)

通过指定角度对原元素指定一个2D旋转，需要先定义一个 transform-origin属性的定义

transform-origin 定义一个旋转的基点，angle为角度，正值表示顺时针，负数为逆时针。如：transform : rotate(30deg);

移动 translate

移动分为三种：

水平垂直方向同时移动 translate(x, y)

水平方向移动 translateX

垂直方向移动 translateY

translate(<translation-value>,[translation-value])

translate(x, y) 表示对象平移，基点默认为元素中心点，当xy值为负数时，反向移动。如：translate(100px,20px)

translateX(<translation-value>)

只向X轴进行移动，比如： translateX(100px)

translateY(<translation-value>)

只向Y轴移动，比如：translateY(20px)

缩放 scale

缩放 scale 与移动 translate 类似，有三种缩放

scale(x, y)

scaleX()

scaleY()

scale(x, y)

x表示水平缩放倍数，y表示垂直方向缩放倍数，如果没有设置Y值，表示x,y方向数值相同。

比如： transform:scale(2, 1.5);

scaleX(number)

比如：transform:scaleX(2)

scaleY(number)

比如：transform:scaleY(2)

扭曲 skew

与translate, scale一样三种情况

1

skew(x, y)

第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。

如：transform(30deg, 10deg)



2

skewX(<angle>)

如：transform:skewX(30deg)



3

skewY(<angle>)

如：transform:skewY（10deg）