使用CSS翻转3D卡

Question

我试图用这样的 CSS 制作 3D卡翻转效果。

不同之处在于我只想使用 CSS 来实现它。

这是我尝试过的代码：

＆＃13;

＆＃13;

/*** 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);
                }
            }
        }
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

问题在于卡片没有翻转，它会像往返一样从后向前拍摄：

是否可以仅使用 CSS 实现 3d卡片悬停效果？

Answer 1

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

这是我为filp效果所改变的：   - 悬停时，正面未在Y轴上旋转   - 当.back div悬停时启动悬停效果。这可能会产生闪烁，因为div正在旋转并且“消失了”＃34;在中间旋转。在静态父项悬停时启动动画会更好。   - 第一个父母并没有真正有用，所以我删除了它

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

＆＃13;

＆＃13;

.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); }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

的这篇文章

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