使用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轴上旋转 - 悬停效果在.backdiv 悬停时启动.这可以在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以了解3d变换和过渡.