CSS3 2D 转换（2D Transforms）是一组允许元素进行旋转、缩放、移动和倾斜等视觉变换的 CSS 属性。它们可以使网页元素在不改变文档布局的情况下，产生动态的视觉效果。
常用 2D 转换属性
1. transform 属性
transform 属性是用来应用 2D 转换的主要属性。通过指定不同的转换函数，可以实现不同的效果。
旋转（rotate）
rotate() 函数用于围绕元素的中心点旋转。
css
transform: rotate(45deg); /* 顺时针旋转 45 度 */
transform: rotate(-30deg); /* 逆时针旋转 30 度 */缩放（scale）
scale() 函数用于在水平和垂直方向上缩放元素。参数可以是一个或两个值，第一个值控制水平缩放，第二个值控制垂直缩放。
css
transform: scale(1.5); /* 同时放大1.5倍 */
transform: scale(2, 0.5); /* 水平放大2倍，垂直缩小到一半 */平移（translate）
translate() 函数用于沿水平和/或垂直方向移动元素。单位可以是像素（px）、百分比（%）等。
css
transform: translate(50px, 100px); /* 向右移动 50px，向下移动 100px */
transform: translateX(30%); /* 仅在水平移动 30% */
transform: translateY(-20px); /* 仅在垂直方向向上移动 20px */倾斜（skew）
skew() 函数用于沿水平和/或垂直方向倾斜元素。
css
transform: skew(30deg, 20deg); /* 水平倾斜 30 度，垂直倾斜 20 度 */
transform: skewX(15deg); /* 仅水平倾斜 15 度 */
transform: skewY(-10deg); /* 仅垂直倾斜 10 度 */2. transform-origin 属性
transform-origin 属性指定转换的原点，即转换相对于元素的哪个点进行。可以设置为具体的像素值、百分比或者关键字（如 left, center, right, top, bottom）。
css
transform-origin: center; /* 默认值，元素中心 */
transform-origin: top left; /* 元素的左上角 */
transform-origin: 50% 50%; /* 元素的中心 */
transform-origin: 10px 20px; /* 从元素左上角偏移 10px 和 20px */3. 组合转换
多个转换可以通过空格分隔来组合使用，组合的顺序会影响最终效果。
css
transform: translate(50px, 100px) rotate(30deg) scale(1.2);例子
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 20px;
transition: transform 0.5s; /* 添加过渡效果 */
}
.rotate {
transform: rotate(45deg);
}
.scale {
transform: scale(1.5);
}
.translate {
transform: translate(50px, 50px);
}
.skew {
transform: skew(30deg, 10deg);
}
</style>
</head>
<body>
<div class="box rotate">旋转</div>
<div class="box scale">缩放</div>
<div class="box translate">平移</div>
<div class="box skew">倾斜</div>
</body>
</html>在这个示例中，我们定义了几个盒子，每个盒子应用了不同的 2D 转换效果：旋转、缩放、平移和倾斜。每个转换都有一个过渡效果，使得变化更加平滑。通过使用这些 CSS3 2D 转换属性，开发者可以为网页元素添加动态的视觉效果。