google-chrome - Chrome 21 在旋转期间缩放元素

Question

我认为这是最新版 Chrome (21.0.1180.57) 中的错误，但我想我会在这里发帖只是为了仔细检查。

我正在使用 javascript 更改元素的旋转，并使用 webkit 转换为旋转设置动画。有时，根据开始和结束旋转，元素随旋转随机缩放。我在这里做了一个演示:http://jsfiddle.net/XCwUQ/ (点击正文)。

有谁知道为什么会这样？

干杯，

基督徒

Answer 1

更新:似乎已在 Chrome 23 中修复。(请参阅@joequincy 对原始问题的评论)

---

确实，这看起来像是一个错误。在修复之前，您可以像这样使用 jQuery animate() 函数:

$(function() {
    var rotation = 163;
    $('body').on('click', function() {
        rotation = (rotation == 163) ? 198 : 163;               
        $('#wheel').animate({
            borderSpacing: rotation
        }, {
            step: function(now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');    
                $(this).css('-moz-transform', 'rotate(' + now + 'deg)');    
                $(this).css('-ms-transform', 'rotate(' + now + 'deg)');    
                $(this).css('-o-transform', 'rotate(' + now + 'deg)');    
                $(this).css('transform', 'rotate(' + now + 'deg)');    
            }
        });        
    });
});​

删除 transition CSS 语句并添加:

border-spacing: 163px;

这个例子误用了 border-spacing 属性，因为它在大多数情况下不会影响您的布局。

参见 http://jsfiddle.net/hongaar/wLTLK/1/

(感谢这个答案:Animate element transform rotate)

注意:您可以选择使用 jQuery 转换插件来删除难看的多个 css() 调用，并使用更简单的 animate() 语法(但增加了开销)。参见 https://github.com/louisremi/jquery.transform.js