CODEWITHSUNDEEP
cssrotation
Cyclone
Cyclone

Reputation: 18295

Rotate page slowly via CSS

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.

Upvotes: 1

Views: 1453

Answers (2)

Mahdi Abdi
Mahdi Abdi

Reputation: 692

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 :]

Upvotes: 1

Kyle
Kyle

Reputation: 67194

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. :)

Upvotes: 0

Related Questions