css3-transform-变形处理

1.transform功能

image.png
image.png

2.transform功能分类

1.scale方法-缩放

-scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数。Y可选，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
如：transform:scale(2,1.5):
-scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。
如：transform:scaleX(2):
-scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。
如transform:scaleY(2):

2.skew方法-倾斜

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

image.png
**skewX(X) **： 按给定的角度沿X轴指定一个倾斜变换。
skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)
image.png
skewY(Y) ： 按给定的角度沿Y轴指定一个倾斜变换。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）
image.png

3.translate方法-移动

（1）translateX(x)：元素仅在水平方向移动（X轴移动）；
语法：transform:translateX(x);
（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；
（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；