css transform

/* 示例代码：使用 CSS transform 属性进行元素变换 */

/* 1. 平移 (translate) */
.transform-translate {
    transform: translate(50px, 100px); /* 水平向右移动50px，垂直向下移动100px */
}

/* 2. 缩放 (scale) */
.transform-scale {
    transform: scale(1.5); /* 元素放大1.5倍 */
}

/* 3. 旋转 (rotate) */
.transform-rotate {
    transform: rotate(45deg); /* 元素顺时针旋转45度 */
}

/* 4. 倾斜 (skew) */
.transform-skew {
    transform: skew(20deg, 10deg); /* 水平倾斜20度，垂直倾斜10度 */
}

/* 5. 组合变换 */
.transform-combine {
    transform: translate(50px, 100px) rotate(45deg) scale(1.5); /* 多个变换组合使用 */
}

解释说明：

• transform 属性用于对元素进行变形操作，如平移、缩放、旋转和倾斜。
• translate(x, y)：水平和垂直方向上移动元素。
• scale(x, y)：缩放元素的宽度和高度。
• rotate(angle)：旋转元素。
• skew(x-angle, y-angle)：使元素倾斜。
• 可以通过组合多个变换函数来实现更复杂的变换效果。