I have a div with the following hover effect: transform: rotateY(180deg); so it's a container that flips on mouse hover. How can I make it so that instead of rotating instantly 180deg, it would slowly rotate 10deg, and then if the mouse is still hovering it, 180deg?

.flip-card-inner {
       transition: transform 0.6s;
       transform-style: preserve-3d;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
 }

CodePudding user response：

You can achieve this by making an animation instead of a transition.

Make sure to use animation-fill-mode: forwards so that the animation stays in place until you stop the :hover. I used 30deg for demonstration purposes.

In your animation, make sure it starts on transform: rotateY(0deg) so it animates from 0deg to 30deg as well (optionally you could just apply transform: rotateY(0deg) directly on .flip-card-inner and start the animation at @keyframe 10%).

Play a bit with the @keyframes values and the animation-duration-property to adjust it to your liking.

.flip-card:hover>.flip-card-inner {
  /* Shorthand for animation-name, animation-duration, animation-fill-mode */
  animation: flip 2s forwards;
}

.flip-card-inner {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
}

@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  10% {
    transform: rotateY(30deg);
  }
  70% {
    transform: rotateY(30deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

<div >
  <div >card</div>
</div>