3d翻转动画 vue3 ts-526互联

<template>
  <section>
   
        <div class="flip-container">
          <div class="cards" :class="{ flipped: isFlipped }">
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
        <button @click="flipCard">Click me</button>
   
  </section> 

</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
  name: "customers-listing",
  components: {
   
  },
  setup() {
   
    const isFlipped = ref(false);

    const flipCard = () => {
      isFlipped.value = !isFlipped.value;
    };
    return {
     
     
      isFlipped,
      flipCard,
    
    };
  },
});
</script>
<style scoped>
.card {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.flip-container {
  width:100%;
  height:100%;
  position: relative;
  perspective: 1000px;
}
.cards {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 1s;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.cards div {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  backface-visibility: hidden;
}
.cards .front {
  background: red;
  background-image: url(http://www.pipubs.com/wp-content/uploads/2013/12/club-girls-dancing.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.cards .back {
  background: blue;
  transform: rotateY(180deg);
  background-image: url(https://media.giphy.com/media/7TM8kWy04HzcA/giphy.gif);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.cards.flipped {
  transform: rotateY(180deg);
}
</style>```