4.2 变换（transform）：元素空间变形的工具
变换用于实现元素在二维或三维空间中的几何变形，包括平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew） 等操作。与过渡不同，变换本身仅改变元素的视觉形态，不会触发状态变化；但若与过渡结合，可实现更丰富的动态效果。
核心变换函数：
translate(x, y)：沿 X/Y 轴平移元素，单位可为像素（px）或百分比（%）；rotate(angle)：绕中心点旋转元素，单位为角度（deg），正值为顺时针；scale(x, y)：沿 X/Y 轴缩放元素，值为倍数（如scale(1.2)表示放大20%）；perspective(n)：定义 3D 空间的透视距离，值越小，透视效果越强烈（需作用于父元素）。
案例 4-2：3D 卡片翻转效果
以下代码实现了一个卡片在鼠标点击时的 3D 翻转效果，关键属性已标注注释：
css
复制代码
.card-container {
width: 200px;
height: 300px;
/* 创建 3D 空间：透视距离 800px */
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d; /* 保持子元素的 3D 空间 */
transition: transform 0.6s; /* 过渡变换属性，实现平滑翻转 */
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面元素 */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}
.card-front {
background-color: #4a90e2;
}
.card-back {
background-color: #5cb85c;
transform: rotateY(180deg); /* 背面初始旋转 180° */
}
.card-container:hover .card {
transform: rotateY(180deg); /* 悬停时整体旋转 180°，显示背面 */
}在上述代码中，perspective: 800px 为父容器创建了 3D 透视空间，使子元素的旋转呈现近大远小的立体效果；transform-style: preserve-3d 确保卡片的正反面在 3D 空间中正确叠加；而 backface-visibility: hidden 则避免了翻转过程中背面元素穿透显示的问题。