CSS 3D 翻转动画效果实现教程 - 完整示例代码

CSS 3D 翻转是 CSS3 中的一个特性，它允许开发者创建 3D 翻转动画效果。通过使用 CSS 的 transform 属性，可以实现在 3D 空间中旋转、翻转和缩放元素。下面是一个基本的 CSS 3D 翻转示例：

/* 定义元素的宽度和高度 */
.box {
  width: 200px;
  height: 200px;
  position: relative;
}

/* 定义元素的正面和背面样式 */
.box .front, .box .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* 定义元素的正面样式 */
.box .front {
  background-color: #333;
  color: #fff;
}

/* 定义元素的背面样式 */
.box .back {
  background-color: #fff;
  color: #333;
  transform: rotateY(180deg);
}

/* 定义鼠标悬停时的动画效果 */
.box:hover .front {
  transform: rotateY(-180deg);
}

.box:hover .back {
  transform: rotateY(0deg);
}

在上面的示例中，我们使用了一个容器元素 .box，其中包含了一个正面元素 .front 和一个背面元素 .back。正面元素 .front 的背面设置为不可见，背面元素 .back 旋转了 180 度，变成了元素的背面。当鼠标悬停在 .box 元素上时，正面元素 .front 和背面元素 .back 都做了 180 度的旋转，实现了 3D 翻转的效果。

需要注意的是，CSS 3D 翻转需要浏览器支持并开启硬件加速，否则会出现性能问题。因此，我们需要在元素上添加 transform-style: preserve-3d 属性来开启硬件加速。