新增！ 我的 44 页电子书“CSS 在 44 分钟内”已出版！ 😃

立即获取 →

#transform

定义元素如何进行转换。

默认 transform: none;

移除任何转换。

transform: translateX(40px);

沿水平轴移动元素。

transform: translateY(20px);

沿垂直轴移动元素。

transform: translateY(100%);

您可以使用百分比值：百分比相对于元素本身，而不是父元素。

transform: translate(20px, -10%);

您可以使用translate()带两个值

  • 第一个值用于水平轴
  • 第二个值用于垂直轴

transform: scaleX(1.5);

沿水平轴缩放元素。

transform: scaleY(0.4);

沿垂直轴缩放元素。

transform: scaleY(-2);

您可以使用负数值：它将反转元素。

transform: scale(0.8, 0.8);

您可以使用scale()带两个值

  • 第一个值用于水平轴
  • 第二个值用于垂直轴

通过对两者使用相同的值，您可以按比例缩放。

transform: rotate(45deg);

旋转元素。

您可以使用

  • 从0到360deg的度数
  • 从0到400grad的梯度
  • 从0到2πrad的弧度
  • 从0到1turn的圈数

transform: skewX(15deg);

沿水平轴倾斜元素。

transform: skewY(45deg);

沿垂直轴倾斜元素。

transform: skew(10deg, -20deg);

您可以使用skew()带两个值

  • 第一个值用于水平轴
  • 第二个值用于垂直轴

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

您可以通过用空格分隔它们来组合多个转换。