- 变形 transform
平移 transform:translate(),基于X、Y轴重新定位元素的位置。
transform:translateX(xpx) 只设置X轴的位移。
transform:translateY(ypx) 只设置Y轴的位移。
transform:translate(xpx,ypx) 设置X轴和Y轴的位移。
缩放 transform:scale(x), 改变元素尺寸大小。
transform:scale(1) 大小不变。
transform:scale(0) 元素消失。
transform: scale(2,1) 只放大x轴。
transform: scale(1,2) 只放大y轴。
-
旋转 transform:rotate(xdeg),x取正值元素相对于原来中心顺时针旋转,不会改变元素的形状。
transform: rotateX(adeg) 沿着x轴旋转,会改变高度。
transform: rotateY(adeg) 沿着y轴旋转 会改变宽度。 -
倾斜 transform:skew(xdeg,ydeg)
skew第一个参数表示x轴 按照逆时针方向进行旋转 宽度变化,高度不变。
skew第二个参数表示y轴 按照顺时针方向进行旋转 高度变化,宽度不变。