无法正确完成翻转3D动画

Question

我正在尝试使用jQuery（Transit）翻转3D动画，但我无法正确翻转该卡片的内容。

CSS：

.flip-back { 

    z-index: 300; 
    background-color: #f0d6a3; 
    transform: rotateY(180deg); 
} 

.flip-back, .flip-front { 

    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    backface-visibility: hidden; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

.flip-container { 

    height: 250px; 
    position: relative; 
} 

.flip-content { 

    position: relative; 
    width:100%; 
    height:100%; 
} 

.flip-front { 

    background-color: #ffffff; 
    position: absolute; 
    z-index: 600; 
} 

HTML：

<div class="col-lg-4 text-center flip-container"> 
    <div class="flip-content"> 
     <div class="flip-front"> 
      Front      
     </div> 
     <div class="flip-back"> 
      Back 
     </div> 
    </div> 
</div> 

JS：

$('.flip-container').mouseenter(function() { 

    $(this).children('.flip-content').transition({rotateY: '180deg'}); 
}); 
$('.flip-container').mouseleave(function() { 

    $(this).children('.flip-content').transition({rotateY: '0deg'}); 
}); 

的问题是，当我尝试阿尼马特e只翻转正面，不显示背面。

Answer 1

发现了问题，我不得不添加

-webkit-transform-style:preserve-3d; 
-moz-transform-style:preserve-3d; 
-ms-transform-style:preserve-3d; 
-o-transform-style:preserve-3d; 
transform-style:preserve-3d; 

在.flip-content CSS类来解决这个问题。