CSS3变形属性 transform

形状变换属性：

transform ： 可以实现元素的形状、角度、位置等的变化。

值： rotate(); 以x/y/z为轴进行旋转，默认为z

rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle)

rotate3d(x, y, z, angle)（为三个方向的矢量和方向）

例  transform: rotatex(45deg); //沿着X轴旋转45度

scale(); 以x/y为轴进行缩放 

scale(x, y) 接受两个值，如果第二参数未提供，则第二个参数使用第一个参数的值

scalex(),scaley() 值是数字表示倍数，不加任何单位 scalez() scale3d()  scale3d(sx,sy,sz)

例 transform: scale(2); //某元素扩大为原来的两倍。

skew(); 对元素进行倾斜扭曲

skew(x, y);接受两个值，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewx(), skewy()

例  transform: skew(10deg) //对某元素X轴扭曲10度

translate(); 可以移动距离,相对于自身位置。（可以结合居中定位使用，当不知道内容元素的宽高时）

translate(x, [y])  当只输入一个值的时，第二个值默认为0

translatex(), translatey(), translatez(), translate3d(x, y, z)

例 transform: translate(100px) //向右平移100px