CSS3学习教程，从入门到精通， CSS3 变形效果（2D 和 3D）的详细语法知识点及案例代码（22）

CSS3 变形效果（2D 和 3D）的详细语法知识点及案例代码

---

CSS3 变形效果语法详解

CSS3变形（Transform）允许我们对元素进行平移、旋转、缩放、倾斜等操作。变形分为2D变形和3D变形，3D变形在2D变形的基础上增加了深度方向的变换。

一、2D 变形

核心属性：transform

1. 平移（Translate）

• translateX(x)：水平移动
• translateY(y)：垂直移动
• translate(x, y)：同时水平和垂直移动

.box {transform: translateX(50px); /* 向右移动50px */transform: translateY(-20px); /* 向上移动20px */transform: translate(30px, 60px); /* 向右30px，向下60px */
}

2. 旋转（Rotate）

• rotate(angle)：顺时针旋转（单位：deg）

.box {transform: rotate(45deg); /* 顺时针旋转45度 */
}

3. 缩放（Scale）

• scaleX(x)：水平缩放
• scaleY(y)：垂直缩放
• scale(x, y)：同时水平和垂直缩放

.box {transform: scaleX(1.5); /* 宽度放大1.5倍 */transform: scale(0.8, 1.2); /* 宽缩小0.8，高放大1.2 */
}

4. 倾斜（Skew）

• skewX(angle)：水平倾斜
• skewY(angle)：垂直倾斜
• skew(x-angle, y-angle)：同时倾斜

.box {transform: skewX(30deg); /* 水平倾斜30度 */
}

5. 变形原点（Transform Origin）

• transform-origin: x y;：定义变形的基准点

.box {transform-origin: left top; /* 变形原点在左上角 */
}

---

二、3D 变形

核心属性：transform 和 perspective

1. 3D 平移

• translateZ(z)：沿Z轴移动（需配合透视）
• translate3d(x, y, z)：三维平移

.box {transform: translate3d(50px, 20px, 100px); /* X/Y/Z轴移动 */
}

2. 3D 旋转

• rotateX(angle)：绕X轴旋转
• rotateY(angle)：绕Y轴旋转
• rotateZ(angle)：绕Z轴旋转
• rotate3d(x, y, z, angle)：自定义旋转轴

.box {transform: rotateX(60deg); /* 绕X轴旋转60度 */
}

3. 3D 缩放

• scaleZ(z)：沿Z轴缩放
• scale3d(x, y, z)：三维缩放

.box {transform: scale3d(1, 1, 2); /* Z轴放大2倍 */
}

4. 透视（Perspective）

• perspective: value;：定义观察者的距离（单位：px）

.container {perspective: 1000px; /* 父容器设置透视 */
}

5. 3D 空间保留

• transform-style: preserve-3d;：子元素保留3D空间

.parent {transform-style: preserve-3d; /* 子元素支持3D变形 */
}

6. 背面可见性

• backface-visibility: visible/hidden;：控制背面是否可见

.card {backface-visibility: hidden; /* 背面不可见 */
}

---

案例代码

案例1：2D 综合变形

<div class="box-2d">Hover Me</div><style>
.box-2d {width: 200px;height: 100px;background: #3498db;transition: transform 0.5s;transform-origin: center; /* 变形原点在中心 */
}.box-2d:hover {transform: translate(20px, 10px) rotate(15deg) scale(1.2);/* 顺序影响结果：先平移 → 旋转 → 缩放 */
}
</style>

案例2：3D 立方体

<div class="cube-container"><div class="cube"><div class="face front">Front</div><div class="face back">Back</div><div class="face left">Left</div><div class="face right">Right</div></div>
</div><style>
.cube-container {perspective: 1000px; /* 父级设置透视 */
}.cube {width: 200px;height: 200px;position: relative;transform-style: preserve-3d; /* 保留子元素3D空间 */animation: rotate 8s infinite linear;
}.face {position: absolute;width: 100%;height: 100%;background: rgba(255, 0, 0, 0.5);border: 2px solid black;display: flex;align-items: center;justify-content: center;font-size: 24px;
}.front { transform: translateZ(100px); } /* 前移 */
.back { transform: translateZ(-100px) rotateY(180deg); } /* 后移并翻转 */
.left { transform: translateX(-100px) rotateY(-90deg); } /* 左移并旋转 */
.right { transform: translateX(100px) rotateY(90deg); } /* 右移并旋转 */@keyframes rotate {from { transform: rotateY(0deg); }to { transform: rotateY(360deg); }
}
</style>

案例3：3D 卡片翻转

<div class="card-container"><div class="card"><div class="front">Front</div><div class="back">Back</div></div>
</div><style>
.card-container {perspective: 1000px;
}.card {width: 200px;height: 300px;position: relative;transform-style: preserve-3d;transition: transform 1s;
}.card:hover {transform: rotateY(180deg);
}.front, .back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden; /* 隐藏背面 */
}.front {background: #e74c3c;
}.back {background: #2ecc71;transform: rotateY(180deg); /* 初始时背面翻转 */
}
</style>

---

关键点总结

1. 变形顺序：多个变形函数按书写顺序依次执行
2. 性能优化：优先使用 transform 和 opacity 实现动画
3. 兼容性：部分旧浏览器需添加 -webkit- 前缀
4. 3D 核心三要素：
   • perspective（透视）
   • transform-style: preserve-3d
   • 正确的元素层级关系

当然可以！以下是几个在开发中常用的 实际案例，结合了 2D 和 3D 变形效果，并附带详细注释和关键点说明：

---

案例 1：导航菜单悬停效果（2D）

场景：导航菜单项悬停时轻微放大并位移，提升交互感。

<nav class="menu"><a href="#" class="menu-item">Home</a><a href="#" class="menu-item">About</a><a href="#" class="menu-item">Services</a>
</nav><style>
.menu {display: flex;gap: 20px;padding: 20px;background: #f0f0f0;
}.menu-item {padding: 10px 20px;background: #3498db;color: white;text-decoration: none;transition: transform 0.3s ease; /* 过渡动画 */transform-origin: center bottom; /* 变形原点在底部中心 */
}.menu-item:hover {transform: translateY(-5px) scale(1.1); /* 上移5px并放大1.1倍 *//* 注意顺序：先位移再缩放，避免位置偏移 */
}
</style>

关键点：

• 使用 translateY 和 scale 组合实现立体感。
• transform-origin 控制缩放基准点，让动画更自然。

---

案例 2：图片悬停放大效果（2D）

场景：鼠标悬停时图片放大并显示阴影，适合图片画廊。

<div class="gallery"><img src="your-image.jpg" alt="Sample" class="gallery-img">
</div><style>
.gallery {width: 300px;height: 200px;overflow: hidden; /* 隐藏超出部分 */border-radius: 8px;box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}.gallery-img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}.gallery-img:hover {transform: scale(1.1); /* 放大1.1倍 */
}
</style>

关键点：

• 父容器设置 overflow: hidden 避免放大后溢出。
• 使用 cubic-bezier 缓动函数让动画更自然。

---

案例 3：旋转加载动画（2D/3D）

场景：页面加载时的旋转指示器。

<div class="loader"></div><style>
.loader {width: 50px;height: 50px;border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;animation: spin 1s linear infinite; /* 无限循环 */
}
@keyframes spin {0% {transform: rotate(0deg); /* 初始角度 */}100% {transform: rotate(360deg); /* 旋转一周 */}
}
/* 可选3D效果：让加载动画更有层次感 */
.loader-3d {transform-style: preserve-3d;transform: perspective(500px) rotateX(45deg); /* 增加3D透视 */
}
</style>

关键点：

• 利用 rotate 和 border 实现环形旋转。
• 添加 preserve-3d 和 perspective 可增强立体感。

---

案例 4：模态框弹出效果（3D）

场景：模态框以3D效果从屏幕外弹出。

<button onclick="openModal()">Open Modal</button>
<div class="modal" id="modal"><div class="modal-content">Hello! 👋</div>
</div><style>
.modal {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) translateZ(-1000px) rotateX(90deg);/* 初始位置：隐藏到Z轴远处并旋转 */opacity: 0;transition: all 0.6s ease;
}.modal.active {opacity: 1;transform: translate(-50%, -50%) translateZ(0) rotateX(0);/* 最终位置：回到中心并恢复角度 */
}
.modal-content {background: white;padding: 20px;box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
</style><script>
function openModal() {document.getElementById('modal').classList.add('active');
}
</script>

关键点：

• 使用 translateZ 和 rotateX 实现3D弹出效果。
• 通过 transition 控制整体动画平滑度。

---

案例 5：3D 翻转卡片（综合3D变形）

场景：用户点击卡片后翻转显示详细信息。

<div class="flip-card"><div class="flip-card-inner"><div class="flip-card-front"><h2>Front</h2><p>Click to flip</p></div><div class="flip-card-back"><h2>Back</h2><p>Details here!</p></div></div>
</div><style>
.flip-card {width: 300px;height: 400px;perspective: 1000px; /* 透视效果 */
}
.flip-card-inner {width: 100%;height: 100%;position: relative;transform-style: preserve-3d; /* 保留子元素3D空间 */transition: transform 0.6s;
}.flip-card:hover .flip-card-inner {transform: rotateY(180deg); /* 悬停时绕Y轴翻转180度 */
}.flip-card-front,
.flip-card-back {position: absolute;width: 100%;height: 100%;backface-visibility: hidden; /* 隐藏背面 */display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 10px;
}.flip-card-front {background: #e67e22;color: white;
}.flip-card-back {background: #2ecc71;color: white;transform: rotateY(180deg); /* 初始状态背面朝外 */
}
</style>

关键点：

• perspective 和 preserve-3d 是3D效果的核心。
• backface-visibility: hidden 确保背面不可见。

---

开发注意事项

1. 性能优化：优先使用 transform 和 opacity 实现动画（GPU加速）。
2. 浏览器兼容性：必要时添加 -webkit- 前缀（如 -webkit-transform-style）。
3. 变形顺序：transform 的多个函数按书写顺序执行（例如 translate 后再 rotate 会改变最终位置）。
4. 调试工具：使用浏览器开发者工具的 3D视图 检查元素层级和变形效果。
   这些案例涵盖了常见的交互场景，建议根据实际需求调整参数（如过渡时间、变形幅度），并尝试组合不同的变形函数创造更多效果！