CSS Transform（变换）：介绍与使用

CSS Transform 属性允许你对元素进行旋转、缩放、移动或倾斜等操作。以下是一些常用的 Transform 属性及其用法。

transform

介绍

transform 属性用于在一个元素上应用 2D 或 3D 转换。

使用示例

div {
  transform: rotate(45deg);
}

说明

这会使 div 元素旋转 45 度。

translate

介绍

translate 函数用于移动元素。

使用示例

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

说明

这会使 div 元素沿 X 轴移动 50px，沿 Y 轴移动 100px。

scale

介绍

scale 函数用于缩放元素。

使用示例

div {
  transform: scale(1.5);
}

说明

这会使 div 元素的大小增加到 1.5 倍。

rotate

介绍

rotate 函数用于旋转元素。

使用示例

div {
  transform: rotate(90deg);
}

说明

这会使 div 元素旋转 90 度。

skew

介绍

skew 函数用于倾斜元素。

使用示例

div {
  transform: skew(30deg, 20deg);
}

说明

这会使 div 元素在 X 轴上倾斜 30 度，在 Y 轴上倾斜 20 度。

transform-origin

介绍

transform-origin 属性用于改变元素的变换原点。

使用示例

div {
  transform-origin: top left;
}

说明

这会使 div 元素的变换原点移动到左上角。

常用推荐

1. transform: translate: 当你需要移动元素但不想影响布局时，这是一个很好的选择。
2. transform: rotate: 用于创建旋转效果，特别是在动画中。
3. transform: scale: 当你需要改变元素大小但不想影响其他元素时，这是一个很好的选择。

希望这篇文章能帮助你更好地理解和使用 CSS Transform 属性！