View Single Post
08-04-2011, 08:00 PM
Jake B is offline Jake B
Jake B's Avatar
Status: Member
Join date: Aug 2007
Location: SF
Expertise: Coder
Software: Sublime Text, Google Chrome
Posts: 211
iTrader: 1 / 100%

Jake B is on a distinguished road

Send a message via AIM to Jake B


You're going to want to look at these things:

- Modernizr
- CSS3 Please
- Some jQuery Rotate plugin

Now, CSS3 transforms are supported by modern browsers, and IE9 and below have their own special filter attribute that does DX transforms. They suck, and you can't animate them so you might want to perform a JavaScript fallback for them instead of actually using them.

Anyways, let's assume this is your HTML:

<img src="image.jpg" class="rotate"/>
This would be your CSS:

.rotate {
	/* This may or may not be needed, as it provides the starting values to transition from */
	-moz-transform: rotate(0deg);  /* FF3.5+ */
       -o-transform: rotate(0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(0deg);  /* IE9 */
          transform: rotate(0deg);

	transition: transform 0.25s ease-in-out;
		-webkit-transition: transform 0.25s ease-in-out;
		-moz-transition: transform 0.25s ease-in-out;
		-o-transition: transform 0.25s ease-in-out;
		-ms-transition: transform 0.25s ease-in-out; /* 
	.rotate:hover {
		/* Rotate everything 7.5deg clockwise */

		-moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.5deg);  /* IE9 */
          transform: rotate(7.5deg);  
Now, all you're doing is if you hover over the image, it rotates it n degrees. Mind you, this is only supported in the specified browsers, so not everyone will see it.

(Optional) Providing Fallbacks for unsupported browsers

Now, let's take this to the next level. We want everyone to see it. Your best bet is to use Modernizr. Modernizr is JavaScript plugin that provides browser support testing along with fallbacks to make sure that your effects work across the board.

Include the modernizr plugin, jQuery and the above jQuery-Rotate and lets get crackin. Your JS:

(function() {
	// define some vars
	var rotate = $('.rotate');


	function rotateImage (event) {
		  test: Modernizr.csstransforms,
		  nope: function() {
		  	// Perform JS fallback
Reading the docs, jQuery-rotate performs filter actions for IE, so you don't necessarily need to include it in your CSS. You can choose to include it though if you'd like.

If you don't care about fallbacks, you should be able to do everything before the fallback method and be perfectly fine.

I hope this helps, I didn't test anything as I am at work, but it should be fine.