使用 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 正在旋转，而 "disapears" 在中间旋转。最好在悬停静态 parent 时启动动画。 - 第一个 parent 不是很有用所以我删除了它

这里是一个简单的示例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 and 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

的文章

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

使用 CSS 翻转 3D 卡片

Flip a 3D card with CSS

css

3d

css-transitions

css-transforms