3d flipping div card in css lag-CodePudding

i'm trying to make an effect where the front side of the card rotates on Y axis then the back side of the card shows up, for some reason, when the card rotates it shows the content of the front side for a second before the back side appears, why is this happening?

.movie-card {
    border-radius: 20px;
    height: 400px;
    width: 300px;
    background-color: #FFE3D8;
    box-shadow: 10px 10px 15px -15px #fff;  
    transform: scale(1);
    cursor: pointer;
    transform-style: preserve-3d;
    transition: all 600ms ;
    transform: rotateY(180deg);
}

img {
    width: 300px;
    height: 400px;
    border-radius: 20px;
}

.frontofcard,
.backofcard {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.frontofcard {
    z-index: 2;
    backface-visibility: hidden;;

}

.backofcard {
    color: #fff;
    font-family: 'Nanum Gothic', sans-serif;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    z-index: 1;
    /* transform: rotateY(180deg); */
    background: #343065;
}


.movie-card:hover {
    opacity: 1;
    transform: scale(1.07);
    transform: rotateY(180deg);
  }

.movie-card:not(:hover) {
    opacity: 0.8;
    transform: scale(0.9);
    
}

        <div >
              <div >
                <div ><img src="https://www.tuppencemagazine.co.uk/wp-content/uploads/2019/12/The-Joker-DVD-and-Blu-ray-cover-art.jpg" alt="" srcset=""></div>
              </div>
              <div >
                <!-- <div >
                    <div >

                    </div>
                </div> -->
              </div>
          </div>
<!--

i hope i made my problem clear, what i'm trying to achieve is to get the back side of the card to the front instantly as the card rotates on hover, so the front side of the card will be on back as long as i hover over the card.

CodePudding user response：

changing Opacity of the front-card after hover.movie-card:hover .frontofcard {opacity: 0;}. but we don't want it as soon as the hover happens & also not late for that i added transition on both cards transition: all 300ms; i choose 300 because your flip animation is 600ms so i think 300ms would be fine.but you can mess around until you find the best timing

.movie-card {
  border-radius: 20px;
  height: 400px;
  width: 300px;
  background-color: #FFE3D8;
  box-shadow: 10px 10px 15px -15px #fff;
  transform: scale(1);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: all 600ms linear;
  transform: rotateY(180deg);
}

img {
  width: 300px;
  height: 400px;
  border-radius: 20px;
}

.frontofcard,
.backofcard {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: all 300ms;  /*I Added*/
  
}

.frontofcard {
  z-index: 2;
  backface-visibility: hidden;
  
}

.backofcard {
  color: #fff;
  font-family: 'Nanum Gothic', sans-serif;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  z-index: 1;
  /* transform: rotateY(180deg); */
  background: #343065;
}

.movie-card:hover {
  opacity: 1;
  transform: scale(1.07);
  transform: rotateY(180deg);
}

.movie-card:hover .frontofcard {   /*I Added*/
  opacity: 0;                      /*I Added*/
}

.movie-card:not(:hover) {
  opacity: 0.8;
  transform: scale(0.9);
}

<div >
  <div >
    <div ><img src="https://www.tuppencemagazine.co.uk/wp-content/uploads/2019/12/The-Joker-DVD-and-Blu-ray-cover-art.jpg" alt="" srcset=""></div>
  </div>
  <div >
    <!-- <div >
                    <div >

                    </div>
                </div> -->
  </div>
</div>
<!--