CSS3 中的 2D 转换（2D Transforms）允许你在二维平面上对元素进行操作，如移动、旋转、缩放和倾斜等，这可以让网页的布局和动画效果更加丰富多样。以下是一些主要的 2D 转换方法：
一、translate（移动）
语法：transform: translate(x,y);或者transform: translateX(x);和transform: translateY(y);。其中x和y是长度值（可以是像素px、百分比%等）。例如，translate(50px, 100px)会将元素在水平方向（x 轴）移动 50 像素，在垂直方向（y 轴）移动 100 像素。而translateX(30%)会将元素在水平方向按照自身宽度的 30% 进行移动。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box {width: 100px;height: 100px;background - color: blue;transform: translate(50px, 50px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
在这个例子中，蓝色方块会在原来位置的基础上向右移动 50 像素并且向下移动 50 像素。
二、rotate（旋转）
语法：transform: rotate(angle);，其中angle是旋转的角度，单位可以是deg（度）。例如，rotate(45deg)会将元素顺时针旋转 45 度。如果要逆时针旋转，可以使用负数角度，如rotate(-30deg)。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box {width: 100px;height: 100px;background - color: green;transform: rotate(30deg);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
三、scale（缩放）
语法：transform: scale(x,y);或者transform: scaleX(x);和transform: scaleY(y);。x和y是缩放比例因子，是无单位的数字。例如，scale(2,1.5)会将元素在水平方向（x 轴）放大 2 倍，在垂直方向（y 轴）放大 1.5 倍。scale(0.5)等同于scale(0.5,0.5)，会将元素缩小为原来的一半。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box {width: 100px;height: 100px;background - color: red;transform: scale(1.2,1.2);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
四、skew（倾斜）
语法：transform: skew(x - angle,y - angle);或者transform: skewX(x - angle);和transform: skewY(y - angle);。x - angle和y - angle是倾斜的角度，单位是deg。例如，skew(30deg, 10deg)会使元素在水平方向倾斜 30 度，在垂直方向倾斜 10 度。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box {width: 100px;height: 100px;background - color: yellow;transform: skew(20deg,0);}</style>
</head>
<body><div class="box"></div>
</body>
</html>
黄色方块会在水平方向倾斜 20 度。
这些 2D 转换方法可以单独使用，也可以组合使用。例如，transform: translate(50px, 50px) rotate(30deg);会先将元素移动，然后再进行旋转。并且，这些转换是基于元素的自身坐标系统进行的，它们不会影响文档流中其他元素的位置（除非元素因为转换而脱离了文档流）。
