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?
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
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
ahh as is yours only works in webkit. I just out right dismissed it once i tested it a it didnt spin. In webkit it spins. However it jumps after the animation is done. Sure there is a way to remidy that though.
My fix is fine for me. I wanted the ul/li set up anyway because multiple imgs and I needed the anchor anyway in order to make ipad/iphone work too. Thanks for your help.
Ya that would be nice. For me these are sidebar images. So 90% of the time no one will even see the animation. I would like possibly to animate them in from scale 1.5 to 1 on page load instead of hoever. do you know how to do that with css?
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?
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
Have you considered using an animation instead of hover states?
Like with jquery you mean? If so maybe.
If I can't get css to go
Same problem Paulie. Weird bug honestly. Don't understand what's causing it.
Think I've cracked most of it using multiple transforms in an keyframe animation.
http://codepen.io/joe/pen/zBhky
Of course, you may need multiple animations if they are going start from a different rotation base.
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
I thought you wanted spin? The solution I gave has both and is only applied to one element.
Still, if you are happy. :)
ahh as is yours only works in webkit. I just out right dismissed it once i tested it a it didnt spin. In webkit it spins. However it jumps after the animation is done. Sure there is a way to remidy that though.
My fix is fine for me. I wanted the ul/li set up anyway because multiple imgs and I needed the anchor anyway in order to make ipad/iphone work too. Thanks for your help.
The jump is due to the lower part of the browser window in Codepen adding a scrollbar.
I also updated the hover state so that it stays scaled.
Wish I could see if there was a way on re-transitioning on 'unhover' without JS.
Ya that would be nice. For me these are sidebar images. So 90% of the time no one will even see the animation. I would like possibly to animate them in from scale 1.5 to 1 on page load instead of hoever. do you know how to do that with css?
I think you could add the keyframe animation to their default state with a single iteration.
Yep: http://codepen.io/joe/pen/aGbFp
Hmmm. Thank you. I'll have to play with this. This may be something better for jquery. Add a 1 sec delay, opacity, etc
Oh, JS would definitely be the way to go with most of this. Much better (browser) support and easier implementation.