css3: If already rotated can’t rotate and scale?

[Eric]

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

[Paulie_D]

Have you considered using an animation instead of hover states?

[Kitty Giraudel]

Same problem Paulie. Weird bug honestly. Don’t understand what’s causing it.

[Paulie_D]

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.

[Paulie_D]

I thought you wanted spin? The solution I gave has both and is only applied to one element.

Still, if you are happy. :)

[Paulie_D]

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.

[Paulie_D]

I think you could add the keyframe animation to their default state with a single iteration.

Yep: http://codepen.io/joe/pen/aGbFp

[Paulie_D]

Oh, JS would definitely be the way to go with most of this. Much better (browser) support and easier implementation.

[Author]

Posts