形状变换属性:
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