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

Question

我正在尝试使用以下代码通过 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 中运行良好。

Answer 1

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

Answer 2

不确定这是否会解决您的问题，因为今天似乎无法访问 jsfiddle（504）。

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

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

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