OK I'm stumped!?

HTML & CSS
1

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
http://www.visibilityinherit.com/projects/spin.html

on hover NO spin
http://www.visibilityinherit.com/projects/polaroid.html

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

2

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

3

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

4

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

5

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?

-ms-transform:rotate(10eg);
-moz-transform:rotate(10eg);

6

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

7

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