WebKit’s Element Rotation
I've created a more efficient method of spinning elements, and it's cross-browser compatible: Create a Spinning, Zooming Effect with CSS3
In the world of rendering engines, WebKit was that kid that spent way too much time experimenting in the lab. You know the kid -- he'd spend his lunch breaks in the science lab and wink at the science teachers when they walked by. He'd be the first to help you with your dissections and would volunteer to set up tomorrow's lab after school.
One of WebKit's cooler browser-specific functionalities is the "rotate" functionality. Using JavaScript you can direct an element to spin.
The JavaScript
window.addEvent('domready',function(){
$$('.rotate360').each(function(element){
element.setStyle('cursor','pointer');
element.addEvent('click',function(){
element.style.webkitTransform = 'rotate(360deg)';
element.setStyle('cursor','');
});
});
});
As you've probably noticed, the CSS-specific property you want to set is the rotate property.
It's a pretty cool effect but sadly it's relegated to a WebKit-only novelty.
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
This doesn’t work on the iPhone; didn’t expect it to but worth a try.
Too bad it’s possible only on WebKit yet.
so cute! i like the effects! thanks
Firefox 3.5 now supports this (via CSS anyway). I haven’t tried doing it using Javascript in 3.5 yet. – https://developer.mozilla.org/en/CSS/-moz-transform I’m already scheming up ways to use it.
This is so needed as a cross browser thing. I have wanted so many times to make an image board that looked like photos were randomly tacked on a board (tilt and all). But there is no easy to do this.
In order to do this in Firefox or IE would take a little more work. Firefox supports transforms (I’m assuming the rotate function is already available) but animations are not. That would require it to be manually animated. In IE, it’s even a little more complicated as the rotate function has to be translated into a matrix transformation. Check out this article for the IE version which includes a rotate demo.
It looks really nice and it was surprisingly smooth.
Very cool. Is there something similar that works with FF. Im sure there must be a way to emulate something similar.
This is useful:
http://www.piksite.com/mRotate
but I have some problems with rotate and drag at the same time..
http://www.piksite.com/forum/viewtopic.php?id=204
I see there are ways to do so in other browsers but it’s too bad that it’s so difficult to implement. I’ll skip the IE bashing.
I am working in a crossbrowser element rotation as soon as I get something, I Will sent to you.
I hope be interesting for you.
@Ivan: Can’t wait to see what you come up with!
you have an email ;-)
Sorry David, but in my browser this doesn’t work. I’m using the Firefox/3.0.8 and when I click on the image, or div doesn’t happening anything.
@Rodreego Nascimento: Safari uses Webkit, not Firefox.
3d version w/o javascript ;)
http://kassens.net/temp/3d.html
Your demo is sooo cool! Thank you!