Flip Card

vue

<template>
  <div :class="$style.wrapper">
    <div :class="$style.card">
      <div :class="[$style.cardSide, $style.frontSide]">Hover me!</div>
      <div :class="[$style.cardSide, $style.backSide]">Flipped!</div>
    </div>
  </div>
</template>

<style module>
.wrapper:hover .card {
  transform: perspective(800px) rotateY(180deg);
  /*  transform-origin: 100% 50%; if you flip like opening door */
}
.card {
  ...
  position: relative;
  transform-style: preserve-3d;  /* to inherit wrapper's perspective */
}
.cardSide {
  ...
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}
</style>