Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Transitions and Transforms Adding 3D Effects with CSS Create a Flipping Animation with 3D Transform Properties

Alex Oates
Alex Oates
7,171 Points
Posted by Alex Oates
Alex Oates
7,171 Points

Flipping cards appear jittery on hover

Hi, I noticed that often, however not all the time, when I hover over the flip card it can become quite jittery and not fully complete the transformation, to the extent that I have to try two sometimes three times before it actually works as expected.

I also noticed this happen in the video, is there any specific reason this happens?

I thought that it could be something to do with when the element reaches a certain degree of rotation it loses the state of hover, if that makes sense, and thus not completing the full transform and reverting back to the original state.

Whether it's that or not I don't know, regardless, is there any way to ensure this doesn't happen? As I have implemented this on my own website and I find it could have negative effect on user experience.

Thanks

Susan Mashevich
Susan Mashevich
3,623 Points
Susan Mashevich
Susan Mashevich
3,623 Points

Hi Nicole,

It would be helpful if you could provide the code you are referring to, however from your explanation I believe I had experienced a similar issue with the hover effect.

What worked in my case was applying the transition-delay property and adjusting the value to 1s, like this: transition-delay: 1s;

Hope above is helpful.

4 Answers

JM Manalo
JM Manalo
21,247 Points
JM Manalo
JM Manalo
21,247 Points

To whoever goes through this same issue. I'm pretty sure this is caused by your mouse no longer being above(:hover) the .photo element. Same goes when you apply a translateX(100%) on an element you hovered on, it'll leave your mouse which means you are no longer :hover-ing over it. In the video I'm pretty sure it should have been: 

.photo-container:hover .photo { 
      /* transform here*/ 
}

since .photo-container never moves so your mouse is always above it.

Catalin Circu
Catalin Circu
6,744 Points
Catalin Circu
Catalin Circu
6,744 Points

oh my god, this is exactly the answer I was looking for! Blessings!

paul oram
paul oram
3,429 Points
paul oram
paul oram
3,429 Points

Yes this is the best answer! It solves the problem.

jaspergradussen
jaspergradussen
5,876 Points
jaspergradussen
jaspergradussen
5,876 Points

Yeah I had the same thing, You want the hover effect to take place on the container of the img/photo/whatever, otherwise, the animation of the img/photo might make it that it 'avoids' your cursor and the animation might stop. So if it's set to the 'containing field' of the image, then the hover still applies.

Alex Oates
Alex Oates
7,171 Points
Alex Oates
Alex Oates
7,171 Points

Thank you, Susan, this worked for me and I am now unable to reproduce the problem.

Susan Mashevich
Susan Mashevich
3,623 Points
Susan Mashevich
Susan Mashevich
3,623 Points

Great. Glad it worked out :)