变形

276 阅读1分钟
  1. 变形 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轴 按照顺时针方向进行旋转 高度变化,宽度不变。