CSS 变换旋转 - Chrome 中的渲染问题答案

【问题标题】：CSS Transform Rotate - Rendering Issue in ChromeCSS 变换旋转 - Chrome 中的渲染问题
【发布时间】：2012-06-29 07:21:28
【问题描述】：

我正在尝试使用以下代码通过 jQuery 旋转 div（标签）：

$(this).addClass("rotate1");

.rotate1{
-webkit-transform: rotate(1deg);
-webkit-transform-origin: 0% 0%;
-moz-transform:  rotate(1deg);
-moz-transform-origin: 0% 0%;
-o-transform: rotate(1deg);
-o-transform-origin: 0% 0%;
-ms-transform: rotate(1deg);
-ms-transform-origin: 0% 0%;
transform: rotate(1deg);
transform-origin: 0% 0%;
}

但我遇到了显示问题，没有完全显示。这是 jsfiddle 上的代码：http://jsfiddle.net/4CgPD/

仅当我尝试通过 jQuery 旋转文章时才会出现此问题。如果我为它分配一个带有 -webkit-transform..rotate... 的 css 类，那么它可以正常工作。

问题出现在 chrome 中，在 Firefox 中运行良好。

【问题讨论】：

如果你打算使用jQuery进行旋转，我推荐使用这个插件：code.google.com/p/jqueryrotate
@eivers88 不，没用，我得到了相同的结果。

标签： jquery google-chrome css webkit webkit-transform

【解决方案1】：

不确定这是否会解决您的问题，因为今天无法访问 jsfiddle，因为它似乎已关闭 (504)。

我会在 javascript 中分配转换，而不是添加类，例如：

document.querySelector(this).style.webkitTransformOrigin = "0% 0%"
document.querySelector(this).style.webkitTransform = "rotate(1deg)"

我发现直接在 javascript 中执行变换和过渡可以使移动设备上的动画更加流畅。

【讨论】：

我试过了，没用。但是，如果我默认在 html 中添加类，那么它可以工作。

【解决方案2】：

我注意到 Chrome 在供应商前缀方面经常存在双重继承问题，我最近在渐变方面遇到了这个问题。我不得不删除多余的 -webkit 属性。我不认为这是这里的问题，但我认为值得提出。

【讨论】：