css transform 平移、旋转、缩放、倾斜元素

在CSS中，可以使用transform属性来平移、旋转、缩放和倾斜元素。以下是实现这些变换的CSS代码示例：

/* 平移 */
.translate {
  transform: translate(50px, 100px); /* 水平方向平移50px，垂直方向平移100px */
}
 
/* 旋转 */
.rotate {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}
 
/* 缩放 */
.scale {
  transform: scale(1.5, 0.8); /* 水平方向放大1.5倍，垂直方向缩小0.8倍 */
}
 
/* 倾斜 */
.skew {
  transform: skew(30deg, 20deg); /* 水平方向倾斜30度，垂直方向倾斜20度 */
}

将上述类应用到HTML元素上，例如：

<div class="translate">平移示例</div>
<div class="rotate">旋转示例</div>
<div class="scale">缩放示例</div>
<div class="skew">倾斜示例</div>

这些CSS类可以组合使用，以实现更复杂的变换效果。例如，要同时应用平移和旋转：

.translate-and-rotate {
  transform: translate(50px, 100px) rotate(45deg);
}

将这个类应用到一个元素上，它会首先平移然后旋转。