perspective() problems fixed with perspective?

Question

I have a flip animation were I use perspective, I have a simple card that flips when hovered. From my understanding the perspective property and the transform property perspective() are the same except perspective is applied to the parent and is rendered on its children and the perspective() is applied directly to an element you want to have perspective, is this correct? I used the perspective property at first then realized I could simplify my code slightly by using perspective() so I changed it. With perspective() if you hover over the card the animation works but if you move the mouse off and back on before the animation finishes at the very beginning of the animation you get some weird results, the back of the card will show through the front and the card will stretch across the screen, all this weird behavior stops when I give the card a parent with a perspective property and delete the perspective(), so is this a browser error or am I not understanding the differences correctly or is there some other property I need to use with perspective() that I'm not aware off?

two versions of css with results

perspective: 1000px; https://fiddle.jshell.net/rqzwoguw/28/

transform: perspective(1000px); https://fiddle.jshell.net/rqzwoguw/29/ // move mouse on and off at the beginning or the middle point of the transition.

Answer 1

Keep the pespective constant, don't change it on hover.

Just add to .card: (no rotation, but the same pespective that you are setting on hover)

transform: perspective(1000px) rotateY(0deg);

.front,
.back,
.card {
  width: 100px;
  height: 170px;
  border-radius: 10px;
  text-align: center;
}

.card {
  position: relative;
  transition: transform 1s ease-in-out 0s;
  transform-style: preserve-3d;
  transform-origin: right;
  transform: perspective(1000px) rotateY(0deg);
}

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

.front {
  background-color: red;
}

.back {
  background-color: blue;
  transform: rotateY(180deg);
  position: absolute;
  top: 0px;
  z-index: -1;
}

<div class="card">
  <div class="front">
    FRONT
  </div>
  <div class="back">
    BACK
  </div>
</div>