Nice article Nat! I was playing around with something similar a while ago. Add a bit of jQuery in and you can have lots of fun with animation to really throw the images and a bit of drag & drop goodness to attemt to improve the usability :) Might finish it off and write it up sometime…

I found very interesting the way CSS handles rotation and transitions. It’s now possible to save a lot of effort with Javascript codes and files.

Great article describing this new feature. Thanks!

Hi Nat,

Thanx muchly for your great article. I have just started playing with CSS3 to see how much of it will do my websites good.

I have been experimenting with your code for a few days now. It is such a pity that one company is showing us such a CSS3 foot-dragging exercise, thus holding up the whole show.

Regards to you in the UK from me in Germany (expat) KenHen

FYI box-shadow has been removed from the CSS3 spec, http://www.w3.org/TR/css3-background/#the-box-shadow, for further discussion and most likely won’t make it back in. We are more likely see a new property like drop-shadow, http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html, replace box-shadow. But of course it’s all still in discussion.

Also Firefox 3.7 (Minefield) also has support for transitions through -moz-transition. Since transitions are a working draft probably would be wise to declare it like you have for box-shadow.

I love how easy it is to add such fun effects to our projects now—thanks for this great example!

One question though: what do you think about the use of box-shadow since it’s been removed from the CSS3 specs? I felt it was a great property that saved us a lot of work, but it’s true that the specs were a bit blurry (the way it handles overflowing, etc).

another excellent article ~ been trying to find some time and a suitable project to play with these for a while now…
Touches like these will just add that certain extra :-) even if a little limited for now….

Thanks for the demos and links, Natalie :)
(also looks like you and Simon had a great time in NZ :-)

As mentioned above, Firefox trunk builds have support for CSS transitions.

Great! The box-shadow does not seem to be recognized in Firebug yet, but it renders great in Firefox.

Last time I tested Firefox 3.7 (Minefield), -moz-transition didn’t support animating -moz-transform property.. hopefully that’ll get in there.

Great article!

I am loving CSS animations in safari and hope they make it to other browsers soon. The only problem I see is that the redraw speed can sometimes cause some pretty weird flickering which I really dislike.

Hopefully these things will get ironed out soon because these features are really nice.

Great article.

Thank you, thank you, thank you for also caring about keyboard users! I’ve seen so many tutorials on awesome CSS transitions that forgot basic usability. It can be done right.

Some very cool tricks and nice clean mark-up. Looking forward to trying them out.

I also really like the design / layout of these 24 ways pages, but scrolling them up and down in Chrome makes an extraordinary demand on the CPU. At first I thought it was the transitions, but having run a few experiments, it is a site-wide issue. Try it out…

Nice use cases!

Regarding this point:

“IE6 doesn’t handle multiple classes” the nit-picky ( but important ) clarification is that IE6 will not always CASCADE correctly with multiple class selectors if the secondary selectors are shared across multiple contexts.

While shirt.big and shoe.big would be problematic, classes shirt.bigShirt and shoe.bigShoe would work fine in IE6.

IE6 just applies multiple class rules individually ( shirt & bigShirt ) without regard to any multi-class context.

I tried rotation a few weeks back but it looks absolutely awful in both Chrome and Firefox. The text was so jagged it was barely legible. Not for me until the browser performance improves.

My favorite 24 Ways entry of 2009 thus far!

I’m adding part of this technique to my online holiday newsletter – it will definitely impress the friends and family… at least the one’s on modern, standards based browsers!

Thanks for the knowledge!

Yeah, I see a noticeable degradation in the image quality when you rotate it. None the less it is a cleaner more dynamic method then using photoshop. I have now implemented it in my site. You can also get rotation in ie with :

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

but I don’t think you can get all angles only 0, 90, 180, 270.
check Snook.ca for more.

Rubbish!

Now I have to redo my perfectly crafted, absolute positioned, overlapping, z-indexed, jquerified Navigation Menu on my personal website.

Rotate has to be the best thing I’ve learned yet this year on 24ways. (although I’m yet to try it outside of Safari…)

I agree with Alan, this is my favorite 24 ways article so far this year. Great job Natalie!

Thanks for writing this! I am blown away at the possibilities with CSS. It’s also fairly simple to implement these techniques, which is fantastic.

@dougwig – shirt.big and shoe.big would work fine in IE6 if you styled an element inside them instead e.g. “shirt.big span” and “shoe.big span” would style the spans as expected.

I wrote a blog post about this many moons ago:

The #id.class selector in IE6

Although it talks about using an ID and a class, the same applies for multiple classes.

P.S. Great article! =)

Best article on 24 so far, really cool!

You actually can do rotation in IE6+. The implementation transforms an object using a matrix, and if you can remember your maths lessons you can do far more than just rotate.

here is the link. http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

I like the effect, I want to use it, but what is the alternative for something similar that complies with web standards?

@Luke – this complies with web standards. The experimental browser features are implemented using -moz and -webkit prefixes, as per the spec, so that they are silently discarded by older browsers without causing harm.

I am all for box shadows, better floats, etc but animation from CSS?

That is going too far IMHO as that is [now] moving into the realm of Javascript; that separation is looking very blurry and if it [WebKit] continues down that road then I for one will not be using any browser based off the back of it.

Lets keep the technologies separate okay?

Just because you can doesn’t mean to say that you should – try to imagine the fun those at Microsoft will have trying to implement those features, then try to imagine the bugs we would have and the hacks and work arounds.

The grass ain’t always greener on the other side.

Wouldn’t your technique work a little more universally if you set the width property of the .polaroid class to auto, or didn’t set it at all?

I’m just thinking the polaroid container could then apply well to images of any width.

After first reading this I was also concerned about these methods infringeing on JavaScript territory, but having thought it through I think this is the right direction.

The transitions are living up to their name – giving a visual effect to a transition between states e.g. :hover. For me, this still comes under the umbrella of presentation rather than behaviour. Transitions don’t manipulate the DOM which is what JavaScript is really all about. It’s fine.

I particularly like the idea of applying transitions to :focus as well as :hover so that keyboard users get some nice visual feedback as they tab through the document.

Wow, great CSS 3 examples. Very useful. Great job Natalie..!