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

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

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

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

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

Answer 2

我一直注意到Chrome在供应商前缀方面经常出现双重继承问题，我最近有这个问题与渐变有关。我不得不放弃-webkit属性，这是一个多余的行为。我认为这不是问题，但我认为值得提出。

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

2 个答案: