CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）

作者：System 时间：2024年08月18日分类：所有,css 字数：682

CSS transform 属性允许你对元素进行变换，包括位移、缩放、翻转以及旋转。

使用 translate() 函数可以对元素进行位移。第一个参数是水平方向的移动距离，第二个参数是垂直方向的移动距离。如果第二个参数未提供，默认为0。




.element {
  transform: translate(50px, 100px);
}

使用 scale() 函数可以对元素进行缩放。第一个参数是水平方向的缩放比例，第二个参数是垂直方向的缩放比例。如果第二个参数未提供，默认与第一个参数相同。




.element {
  transform: scale(1.5, 2);
}

使用 rotate() 函数可以对元素进行旋转。参数是旋转的角度，正值表示顺时针旋转，负值表示逆时针旋转。




.element {
  transform: rotate(45deg);
}

transform 属性可以接受一个由空格分隔的变换函数列表，这意味着你可以组合使用多个变换。




.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5, 2);
}

以上代码将先位移，然后旋转，最后缩放元素。