如何仅使用 CSS 在悬停时旋转 3D CSS 卡？

悬停时的 CSS 可翻转 3D 卡片效果

在本教程中，我们的目标是仅使用 CSS 实现 3D 卡片翻转效果。将鼠标悬停在卡片上时，卡片会从正面平滑地旋转到背面。

代码实现：

<code class="css">.card {
  position: relative;
  width: 50vh;
  height: 80vh;
  perspective: 500px;
  margin: 10vh auto 50vh;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  background-color: #66ccff;
}

.back {
  background-color: #dd8800;
  transform: rotateY(180deg);
}

.card:hover .front {
  transform: rotateY(180deg);
}

.card:hover .back {
  transform: rotateY(360deg);
}</code>

说明：

1. 我们首先定义一个具有所需高度、宽度和视角的容器类 .card。
2. 在 .card 容器内，我们创建两个子元素：.front 和 .back来表示卡片的正面和背面。
3. 我们将 .front 和 .back 绝对定位在 .card 容器内，并将它们的尺寸设置为 100% 宽度和高度。
4. 我们应用过渡到两个元素的变换属性，以在悬停时实现平滑旋转。
5. 为了防止翻转动画期间闪烁，我们将 backface-visibility 设置为隐藏，将变换样式设置为 keep-3d。
6. 最初，使用变换：rotateY(180deg);将背面沿Y轴旋转180度。
7. 悬停时，我们将正面旋转180度，背面旋转360度以完成翻转。

以上是如何仅使用 CSS 在悬停时旋转 3D CSS 卡？的详细内容。更多信息请关注PHP中文网其他相关文章！