'CSS Rotating Info Cards are Flickering

I have some pure HTML/CSS that I'm trying to figure out -

Hovering over the cards should perform a flip effect. The effect works, but if you run over it too quickly or at a weird angle it will create a sort of "stuttering". I'm trying to fix it so that it's seamless no matter what.

It seems like the issue happens when the cursor goes outside the card container, since the box is shrinking and expanding again to create that flip effect.

Any idea how to fix this?

https://codepen.io/mttmrn/pen/zgZKjj

HTML:

<body>

  <!-- 
            This is where the cards start
        -->
  <div class="card-container">
    <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>


CSS:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: rgb(250, 224, 30);
}

.card-container {
  display: flex;
  margin-top: 12%;
  margin-left: 15%;
  margin-right: 15%;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
}

.card {
  width: 275px;
  height: 350px;
  border: 4px solid black;
  margin-top: 50px;
  border-radius: 2px;
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.75);
  transform-style: preserve-3d;
  transition: transform 1s;
}

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

.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-back {
  background: wheat;
}

.card-text {
  list-style: none;
  margin: 20px 50px 0px 50px;
  line-height: 40px;
}

.card-text li:not(:last-child) {
  border-bottom: 1px solid #0004;
}

.card-img {
  height: 150px;
  width: 268px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-front:nth-child(1) {
  animation: fadeIn 1.5s 0.3s backwards;
}

.card-front:nth-child(2) {
  animation: fadeIn 1.5s 0.6s backwards;
}
.card-front:nth-child(3) {
  animation: fadeIn 1.5s 0.9s backwards;
}
.card-front:nth-child(4) {
  animation: fadeIn 2s 1.2s backwards;
}
.card-front:nth-child(5) {
  animation: fadeIn 2s 1.5s backwards;
}
.card-front:nth-child(6) {
  animation: fadeIn 2s 1.8s backwards;
}

The animation should be smooth when hovered over and should remain flipped until the cursor leaves the card.

html css

Solution 1:^[1]

i hope this is what you are looking for.. so all i had to do was adding a card-wrap div around each card div and use hover on that card-wrap so that even when the actual card is rotating every thing going okay with the position of the cursor

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

here's a snippet

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: rgb(250, 224, 30);
}

.card-container {
  display: flex;
  margin-top: 12%;
  margin-left: 15%;
  margin-right: 15%;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
}

.card {
  width: 275px;
  height: 350px;
  border: 4px solid black;
  margin-top: 50px;
  border-radius: 2px;
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.75);
  transform-style: preserve-3d;
  transition: transform 1s;
}

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

.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-back {
  background: wheat;
}

.card-text {
  list-style: none;
  margin: 20px 50px 0px 50px;
  line-height: 40px;
}

.card-text li:not(:last-child) {
  border-bottom: 1px solid #0004;
}

.card-img {
  height: 150px;
  width: 268px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-front:nth-child(1) {
  animation: fadeIn 1.5s 0.3s backwards;
}

.card-front:nth-child(2) {
  animation: fadeIn 1.5s 0.6s backwards;
}
.card-front:nth-child(3) {
  animation: fadeIn 1.5s 0.9s backwards;
}
.card-front:nth-child(4) {
  animation: fadeIn 2s 1.2s backwards;
}
.card-front:nth-child(5) {
  animation: fadeIn 2s 1.5s backwards;
}
.card-front:nth-child(6) {
  animation: fadeIn 2s 1.8s backwards;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js" integrity="sha384-7Gk1S6elg570RSJJxILsRiq8o0CO99g1zjfOISrqjFUCjxHDn3TmaWoWOqt6eswF" crossorigin="anonymous">
  </script>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" />
</head>

<body>

  <!-- 
            This is where the cards start
        -->
  <div class="card-container">
    <div class="card-wrap">
      <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>
    </div>
    </div>
    <div class="card-wrap">
      <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>
    </div>
    </div>
 

  </div>
  <!--
            Card End
        -->
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Khaled Mahfoz

'CSS Rotating Info Cards are Flickering

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]