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

问题描述

我正在尝试使用 CSS 来制作 3D卡翻转效果。

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

3D翻转卡。不同之处在于，我只想使用 CSS 来实现它。

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

这是我尝试的代码：

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

是否可以仅使用 CSS 来实现这种 3d悬停翻页效果？

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

推荐答案

我简化了代码，使其更短，并使 3d卡悬停翻转。卡片从正面到背面在Y轴上翻转，如下所示：

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:

这是我为影片效果所做的更改：
-悬停时正面未沿Y轴旋转
-悬停效果为在 .back div悬停时启动。当div旋转时，这会产生闪烁，而在中间旋转时会消失。悬停静态父对象时最好启动动画。
-第一个父母不是真的有用，所以我将其删除

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

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

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>

>

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

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