OK I'm stumped!?

I’m making a css3 only Polaroid effect for my personal site. I was almost all done but I hit a snag here trying to combine multiple effects. See…

on hover spin

on hover NO spin

I WANT it to spin. It stops spinning in all browsers if I either add “scale(1.5,1.5)” to the :hover OR add “transform:rotate(10deg);” to it’s default state. It seems the way I have it it cant do all three. Can you find a way to make it do all three effects? Thanks

To clarify: I want it to start 10 degrees rotated - spin on hover - and get 50% bigger while doing it. Like this but of course 10% rotated in its default state. http://www.visibilityinherit.com/projects/spin+.html

Ok I solved it! I’ll upload it later and show

I solved it. When it reminded me of the IE png animate and hover bug fix I realized how to fix it. The fix is to put the default rotation on the li and the hover rotation on the a. http://www.visibilityinherit.com/projects/polaroid.html

Nice work, Eric. Another CSS3 test to bookmark for when I get into it!

What are all those egs you have in your code, though?


Thanks for catching that. Just copy paste errors. I prob never would have seen it.

Here is another cool iteration of that. Polaroid gallery. I’ll make a tut for it. http://www.visibilityinherit.com/projects/polaroid-gallery.php

Woo! Looks cool. (Ha ha, you need to warn people who have problems with things flashing etc. :stuck_out_tongue: )