1

Is it possible to slowly rotate parts of a page (in this case a single class) via CSS? My current code:

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

Unfortunately there is no way to use javascript for this, with the amount of access I have.

Is there a way to rotate this class on rollover or if the mouse is on top of it, or just simply rotate? This must be done entirely via CSS.

Thanks for the help! I know this is a strange request, but I hope to find an answer.

Cyclone
  • 17,939
  • 45
  • 124
  • 193
  • 1
    AFAIK, this would only be doable in Safari. This link might help: http://stackoverflow.com/questions/2584138/css3-continous-rotate-animation-just-like-a-loading-sundial – DA. Jun 22 '10 at 21:14
  • Wouldn't any other browser that uses webkit be able to do that? I need this to work in Chrome and FF mainly, but I know FF uses gecko for rendering – Cyclone Jun 22 '10 at 22:58
  • Hehehe...got it working for Chrome. Now all I need is FF. – Cyclone Jun 22 '10 at 23:12

2 Answers2

1

For Firefox :

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

For Chrome , Safari and Opera :

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

And Internet Explorer Doesn't support this :]

Mahdi Abdi
  • 682
  • 6
  • 27
0

There are some good hints and tips on this page for Firefox. :)

Something like: 

.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);
}

Which is what you have, but note that Firefox only supports it from v3.1 and up. :)

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • I need animation, which they said on that page isn't supported. Thanks for the help though! The code you posted was essentially what I already had. – Cyclone Jun 23 '10 at 22:27