CSS3卡翻转毛刺

Question

我使用CSS创建了HTML翻转卡。 但是，当卡翻转时，会出现闪烁（好像几乎无法完全翻转）。 该故障主要在光标直接在卡的中心移动时发生。

任何帮助是极大的赞赏！

 .card-box { width: 100px; height: 50px; position: relative; } .card { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: 1s ease; } .card:hover { transform: rotateY(180deg); } .front { background: red; width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .back { background: blue; position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); } 

 <div class="card-box"> <div class="card"> <div class="front"> Front </div> <div class="back"> Back </div> </div> 

这是jsfiddle的链接： https ://jsfiddle.net/rogybear/tfcu3qkr/3/

Answer 1

添加

.card-box:hover .card {
      transform: rotateY(180deg);
    }

 .card-box { width: 100px; height: 50px; position: relative; } .card { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; transition: 1s ease; } .card-box:hover .card { transform: rotateY(180deg); } .front { background: red; width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .back { background: blue; position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); } 

 <div class="card-box"> <div class="card"> <div class="front"> Front </div> <div class="back"> Back </div> </div>