我在 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');
});
有什么想法吗?
最佳答案
我也遇到过这个问题。我猜这是一个错误,但您可以通过添加来避免它
-webkit-backface-visibility: hidden;
您的 html, body
CSS 规则。
关于jquery - Chrome 并不总是在 css3 动画期间应用透视,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17613995/