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 规则。