使用CSS翻转一个3D卡片

Question

我正在尝试使用CSS制作像这样的3D翻转卡片效果。

不同之处在于，我希望仅使用CSS来实现它。

以下是我尝试过的代码：

/*** LESS: ***/

    .card-container {
        position: relative;
        height: 12rem;
        width: 9rem;
        perspective: 30rem;
        .card {
            position: absolute;
            width: 100%;
            height: 100%;            
            div {
                position: absolute;
                height: 100%;
                width: 100%;
            }
            .front {
                background-color: #66ccff;
            }
            .back {
                background-color: #dd8800;
                backface-visibility: hidden;
                transition: transform 1s;
                &:hover {
                    transform: rotateY(180deg);
                }
            }
        }
    }

HTML:
<div class="card-container">
  <div class="card">
    <div class="front"><span>Front</span></div>
    <div class="back"><span>Back</span></div>
  </div>
</div>

问题在于卡片没有翻转，而是像这样从背面弹到正面：

是否可能仅使用 CSS 实现这种悬停时的 3D 卡片翻转效果？

- Ryan Hu

---

“front” 不会被动画化。将其旋转设置为 180 度，在鼠标悬停时与后面类似旋转到 360 度。360 度类似于 0 度，但应保持相同的旋转方向。 - Yemachu

Answer 1

我简化了代码，使其更短，并在鼠标悬停时实现了3D卡片翻转。卡片在Y轴上从正面翻转到背面，效果如下：

这是一个简单的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);
}

<div class="card">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div>

这是我在你的代码中为翻转效果所做的更改：

- 正面没有在悬停时绕Y轴旋转 - 悬停效果是在悬停在`.back` div上时触发的。这可能会导致闪烁，因为该div正在旋转并在旋转中间“消失”。最好在悬停在静态父元素上时启动动画。 - 第一个父元素实际上没有用处，所以我将其删除了。

- web-tiki

---

哇，太棒了~ 我一直在尝试悬停在父元素上，但我错过了 transform: rotateY(360deg); 这个属性，导致悬停时完全空白。正面和背面只是翻转并一起隐藏了... 感谢您详细的回答！ - Ryan Hu

Answer 2

是的，可以仅使用CSS完成，您可以使用CSS3动画属性进行操作。这里有一个翻转卡片动画的示例。

<div class="container text-center">
  <div class="card-container">
  <div class="card">
    <div class="front">
      <span class="fa fa-user"></span>
    </div>
    <div class="back">User</div>
  </div>
</div>

The CSS

.card-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 12px;
    perspective: 900px;
    text-align: center;
}

.card {
  position: relative;
  width: 100px;
  height: 100px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  background: #FEC606;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}

.front {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

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

.back {
  transform: rotateY(180deg);
}

您还可以阅读有关CSS翻转动画悬停的文章。

您还可以从文章中找到演示和下载源代码。

- ashfaq ahmed