我正在尝试使用以下代码通过 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 中运行正常。
最佳答案
不确定这是否会解决您的问题，因为今天似乎无法访问 jsfiddle (504)。
我不会添加类，而是在 javascript 中分配转换，例如:
document.querySelector(this).style.webkitTransformOrigin = "0% 0%"
document.querySelector(this).style.webkitTransform = "rotate(1deg)"
我发现直接在 javascript 中执行变换和过渡可以使移动设备上的动画更加流畅。
关于jquery - CSS 变换旋转 - Chrome 中的渲染问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11233349/