jquery - Chrome 并不总是在 css3 动画期间应用透视

Question

我在 Chrome 中遇到了一个随机错误，CSS3 3D 变换的视角被忽略，直到动画的最后一帧。这种情况并不是每次都会发生，而且似乎也没有规律可循。

您可以在此处查看示例:http://jsfiddle.net/6gCBx/15/

HTML:

<div id="holder">click me</div>

CSS

html, body{
    width: 100%;
    height: 100%;
    background-color: #444444;
    padding: 0;
    margin: 0;
    -webkit-perspective: 600px;
}

#holder{
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
   -webkit-transition: -webkit-transform 0.5s ease;
   -webkit-transform-origin: 50% 100%;
}

.tilt{
    -webkit-transform: rotateX(40deg);
}

jQuery:

$('#holder').click(function(){
    $('#holder').toggleClass('tilt');
});

有什么想法吗？

Answer 1

我也遇到过这个问题。我猜这是一个错误，但您可以通过添加来避免它

-webkit-backface-visibility: hidden;

您的 html, body CSS 规则。