CSS3的变形属性

CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

设置变形函数，★ 可以是一个，也可以是多个，中间以空格分开

transform:[transform-function] ;

1.translate（2D位移）

平移函数，基于X、Y坐标重新定位元素的位置

translate(tx,ty);

            tx X轴（横坐标）移动的向量长度

            ty Y轴（横坐标）移动的向量长度

 

 2.scale（2D缩放）

scale(sx,sy);

 sx 横向坐标（宽度）方向的缩放量

 sy 纵轴坐标（高度）方向的缩放量

 scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

 

 3.skew（2D倾斜）

skew(ax, ay);

ax 水平方向（X轴）的倾斜角度

ay 垂直方向（Y轴）的倾斜角度

度数使用deg单位

 

 4.rotate（2D旋转）

  rotate(a)

参数a单位使用deg表示

参数a取正值时元素相对原来中心顺时针旋转

 

 

提醒一下：

rotate旋转和skew倾斜的区别：

 rotate( )函数只是旋转，而不会改变元素的形状

 skew( )函数是倾斜，元素不会旋转，会改变元素的形状

小练习