使用 CSS 翻转 3D 卡片 [英] Flip a 3D card with CSS

问题描述

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

不同的是我只想用CSS来实现它.

这是我试过的代码:

/*** LESS: ***/.card-容器{位置:相对；高度:12rem；宽度:9rem；视角:30rem；.卡片 {位置:绝对；宽度:100%；高度:100%；div {位置:绝对；高度:100%；宽度:100%；}.正面 {背景色:#66ccff；}.背部 {背景颜色:#dd8800；背面可见性:隐藏；转换:转换1s；&:悬停{变换:旋转Y(180度)；}}}}

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

问题在于卡片不会翻转，而是像这样从后向前卡住:

是否可以仅使用 CSS 来实现这种 悬停时的 3d 卡片翻转效果?

解决方案

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

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

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

.card {位置:相对；宽度:9rem；高度:12rem；视角:30rem；}.前后 {位置:绝对；宽度:100%；高度:100%；转换:转换1s；背面可见性:隐藏；}.正面 {背景色:#66ccff；}.背部 {背景颜色:#dd8800；变换:旋转Y(180度)；}.card:hover .front{ 变换:rotateY(180deg);}.card:hover .back { 变换:rotateY(360deg);}

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

请注意，您需要根据要支持的浏览器添加供应商前缀.有关 3d 变换 和 transitions.

I'm trying to make a 3D card flipping effect with CSS like this.

The difference is that I want to use only CSS to implement it.

Here is the code I tried:

/*** 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>

The issue is that the card doesn't flip, it snaps from back to front like this:

Is it possible to implement this 3d card flip on hover effect using only CSS?

解决方案

I simplified the code to make it shorter and make the 3d card flip on hover. The card flips on the Y axis from the front face to the backface this is what it looks like:

This is what I changed for the filp effect: - the front face wasn't rotated on th Y axis on hover - the hover effect was launched when the .back div was hovered. This can create flickering as that div is rotating and "disapears" at mid rotation. It's better to launch the animation when the static parent is hovered. - the first parent isn't really usefull so I removed it

Here is an example of a simple CSS only flipping card the flip animation is launched on hover :

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

Note that you will need to add vendor prefixes depending on the browsers you want to support. See canIuse for 3d transforms and transitions.

这篇关于使用 CSS 翻转 3D 卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！