通过 CSS 缓慢旋转页面答案

【问题标题】：Rotate page slowly via CSS通过 CSS 缓慢旋转页面
【发布时间】：2011-03-07 00:59:57
【问题描述】：

是否可以通过 CSS 缓慢旋转页面的某些部分（在本例中为单个类）？我当前的代码：

.c1
{
 -webkit-transform: rotate(170deg);
 -moz-transform: rotate(170deg);
 -o-transform: rotate(170deg);
}

不幸的是，由于我拥有的访问量，没有办法为此使用 javascript。

有没有办法在鼠标悬停时旋转这个类，或者鼠标在它上面，或者只是简单地旋转？这必须完全通过 CSS 完成。

感谢您的帮助！我知道这是一个奇怪的要求，但我希望能找到答案。

【问题讨论】：

AFAIK，这只能在 Safari 中实现。此链接可能会有所帮助：stackoverflow.com/questions/2584138/…
其他任何使用 webkit 的浏览器都不能做到这一点吗？我需要这个主要在 Chrome 和 FF 中工作，但我知道 FF 使用 gecko 进行渲染
呵呵呵呵...让它适用于 Chrome。现在我只需要FF。

标签： css rotation

【解决方案1】：

对于火狐：

 -moz-transform: rotate(15deg) scale(1.25, 0.5);
 transform: rotate(15deg) scale(1.25, 0.5);

对于 Chrome 、Safari 和 Opera ：

    -webkit-transform: rotate(15deg) scale(1.25, 0.5);

而 Internet Explorer 不支持这个：]

【讨论】：

【解决方案2】：

在this page for Firefox 上有一些很好的提示和技巧。 :)

类似：

.transformed {
    -webkit-transform: rotate(15deg) scale(1.25, 0.5);
    -moz-transform: rotate(15deg) scale(1.25, 0.5);
    transform: rotate(15deg) scale(1.25, 0.5);
}

这是您所拥有的，但请注意 Firefox 仅支持 v3.1 及更高版本。 :)

【讨论】：

我需要动画，他们在那个页面上说不支持。不过感谢您的帮助！你发布的代码基本上是我已经拥有的。