picnictutorials — 2012-12-06T07:19:34-05:00 — #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
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
picnictutorials — 2012-12-06T08:02:38-05:00 — #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
picnictutorials — 2012-12-06T18:00:44-05:00 — #3
Ok I solved it! I'll upload it later and show
picnictutorials — 2012-12-07T07:48:35-05:00 — #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
ralphm — 2012-12-07T09:41:02-05:00 — #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?
picnictutorials — 2012-12-07T10:39:51-05:00 — #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
ralphm — 2012-12-07T10:42:06-05:00 — #7
Woo! Looks cool. (Ha ha, you need to warn people who have problems with things flashing etc. )