CSS3实现3D旋转动画卡片翻转效果

最新推荐文章于 2025-06-28 17:06:15 发布

原创

最新推荐文章于 2025-06-28 17:06:15 发布 · 2.6k 阅读

标签

#HTML #CSS #web #css3 #网页开发

收录于

CSS3实现3D旋转动画卡片翻转效果

在现代Web设计中，使用CSS3创建3D效果已经成为一种趋势，尤其是在增强用户体验方面。今天我们要探讨的是如何利用CSS3的3D变换功能来实现一个动态的卡片翻转效果。这种效果常用于产品展示、幻灯片放映或是任何需要吸引用户注意力的地方。

基本概念与作用

3D变换允许我们在二维平面上创建三维空间的视图。这涉及到使用transform-style: preserve-3d;来保留子元素的3D空间位置，以及使用translateZ()和rotateY()等函数来实现深度和旋转效果。此外，perspective属性定义了观察者的距离，这对于创建逼真的3D效果至关重要。

示例一：基本的卡片翻转

让我们从最简单的卡片翻转开始。我们将创建一个可以翻转的卡片，当鼠标悬停在卡片上时，卡片会翻转180度。

<div class="card">
  <div class="front">正面</div>
  <div class="back">背面</div>
</div>

.card {
   
   
  perspective: 1000px;
  width: 200px;
  height: 300px;
}

.card .front, .card .back {
   
   
  position: absolute;
  width: 100%;
  height