transform 是 CSS 中的属性，用于对元素进行变换，包括平移、旋转、缩放和倾斜等。通过 transform 属性，你可以在不改变文档流的情况下改变元素的外观。

以下是一些常见的 transform 属性值：

1. translate()： 平移元素。
   .translate-box {
     transform: translate(50px, 20px);
   }

   这会使 .translate-box 元素向右移动 50 像素，向下移动 20 像素。

2. rotate()： 旋转元素。
   .rotate-box {
     transform: rotate(45deg);
   }

   这会使 .rotate-box 元素顺时针旋转 45 度。

3. scale()： 缩放元素。
   .scale-box {
     transform: scale(1.5);
   }

   这会使 .scale-box 元素放大为原来的 1.5 倍。

4. skew()： 倾斜元素。
   .skew-box {
     transform: skew(30deg, 20deg);
   }

   这会使 .skew-box 元素水平方向倾斜 30 度，垂直方向倾斜 20 度。

5. matrix()： 使用矩阵进行变换。
   .matrix-box {
     transform: matrix(1, 0.5, -0.5, 1, 0, 0);
   }

   这是一个使用矩阵进行复杂变换的例子。

这些变换可以单独使用，也可以组合在一起。例如：
.combined-transform {
  transform: translate(50px, 20px) rotate(45deg) scale(1.5);
}

这个例子中，.combined-transform 元素先向右下方平移 50 像素和 20 像素，然后顺时针旋转 45 度，最后放大为原来的 1.5 倍。需要注意的是，变换的顺序影响最终效果。


转载请注明出处：http://www.zyzy.cn/article/detail/6146/CSS