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 spinhttp://www.visibilityinherit.com/projects/spin.html
on hover NO spinhttp://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
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. )
This topic is now closed. New replies are no longer allowed.