用CSS翻转3D卡

我正在尝试使用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> 

问题是，卡不翻转，它像这样从后面alignment：

有没有可能实现这个3D卡翻​​转hover效果只使用CSS ？

Answer 1

我简化了代码，使其更短，使hover的3d卡翻转 。 该卡在Y轴上从正面向背面翻转，如下所示：

这是我为filp效果改变的： – 在hover的时候Y轴上没有旋转正面 – hover效果是在.back divhover的时候启动的。 这可以产生闪烁，因为该div旋转和“消失”在中期旋转。 当静态父代被徘徊时，最好启动animation。 – 第一个父母是不是真的有用，所以我删除它

下面是一个简单的CSS翻转卡的例子，翻转animation在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>