使用 CSS 翻转 3D 卡片答案

【问题标题】：Flip a 3D card with CSS使用 CSS 翻转 3D 卡片
【发布时间】：2021-06-28 01:34:10
【问题描述】：

我正在尝试像这样使用 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 卡片效果？

【问题讨论】：

“前面”没有动画。将其旋转设置为 180、360，当您将鼠标悬停在其上时，类似于背面。 360 度与 0 度类似，但应保持相同的旋转方向。

标签： css 3d css-transitions css-transforms

【解决方案1】：

我简化了代码以使其更短，并使 3d 卡片在悬停时翻转。卡片在 Y 轴上从正面翻转到背面是这样的：

这是我为 filp 效果所做的更改： - 悬停时正面未在 Y 轴上旋转 - 当.back div 悬停时启动悬停效果。当 div 正在旋转并在中间旋转时“消失”时，这会产生闪烁。最好在静态父级悬停时启动动画。 - 第一个父母不是很有用，所以我删除了它

这是一个简单的仅CSS翻转卡片的示例，翻转动画在悬停时启动：

.card {
  position: relative;
  width: 9rem; height: 12rem;
  perspective: 30rem;
}
.front, .back {
  position: absolute;
  width: 100%; height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.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>

请注意，您需要根据要支持的浏览器添加供应商前缀。 3d transforms 和 transitions 参见 canIuse。

【讨论】：

哇，太棒了~我试图将鼠标悬停在父级上，但我错过了transform: rotateY(360deg);，导致悬停时完全空白。正反面刚刚翻转，一起藏起来了……谢谢你的详细解答！

【解决方案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>

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 Flip Animation on Hover的文章

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

【讨论】：