CSS 的 transform 属性允许你对元素进行旋转、缩放、倾斜或移动等操作。以下是一些常见的变换类型：
基本语法
css">transform: transform-function(value);
常用的 transform 函数
-
translate：移动元素的 X 和 Y 轴位置。
css">transform: translate(50px, 100px); /* X 轴移动 50px，Y 轴移动 100px */ -
rotate：旋转元素，角度可以是正负值，单位是
deg。css">transform: rotate(45deg); /* 顺时针旋转 45 度 */ -
scale：缩放元素。可以分别设置 X 轴和 Y 轴的缩放值。
css">transform: scale(1.5); /* 同时按比例放大 1.5 倍 */ transform: scale(1.5, 0.5); /* X 轴放大 1.5 倍，Y 轴缩小一半 */ -
skew：倾斜元素，分别设置 X 和 Y 轴的倾斜角度。
css">transform: skew(30deg, 20deg); /* X 轴倾斜 30 度，Y 轴倾斜 20 度 */ -
matrix：使用矩阵设置变换，是以上变换的组合形式。
css">transform: matrix(1, 0, 0, 1, 50, 100);
组合变换
你可以在 transform 属性中使用多个变换函数，以空格分隔，它们将按顺序应用。
css">transform: translate(50px, 100px) rotate(45deg) scale(1.5);
示例
<div class="box">Transform me!</div><style>css">.box {width: 100px;height: 100px;background-color: #3498db;transform: translate(50px, 50px) rotate(30deg) scale(1.2);transition: transform 0.5s; /* 添加平滑过渡效果 */}/* 鼠标悬停时应用不同的变换 */.box:hover {transform: translate(0, 0) rotate(-30deg) scale(1);}
</style>
在这个示例中，.box 元素在鼠标悬停时会应用新的 transform 变换，带来交互效果。
