Worked perfectly :) Thank you! And no issue in Safari now.
I'm so curious why it didn't work the first time, it must be something about during the transition the cursor is not hovering over the card, but still the portfolio 🤯
Yes, since the animation was on the element with the :hover pseudoclass, its bounds were changing as it was rotating, making it basically dodge the mouse pointer, especially if you approached the card from the side.
I think you can fix the animation by moving the
transformfrom.card:hoverto.portfolio__item:hover > .card.I don’t know why why the back of the card disappears in Safari after the animation ends, though.
Worked perfectly :) Thank you! And no issue in Safari now.
I'm so curious why it didn't work the first time, it must be something about during the transition the cursor is not hovering over the card, but still the portfolio 🤯
Yes, since the animation was on the element with the
:hoverpseudoclass, its bounds were changing as it was rotating, making it basically dodge the mouse pointer, especially if you approached the card from the side.That is a great thought experiment for teaching CSS animations... I may use this in the future ☺️ thank you