使用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卡翻转悬停效果？

Answer 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>

请注意，您需要添加供应商前缀，具体取决于您要支持的浏览器。请参阅canIuse for 3d transforms和transitions。

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>

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的这篇文章

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