卡片翻转

2023-06-29 19:18:15

点击试试

A

B

<script setup>
import { ref } from 'vue'

const isFlip = ref(false)
const flipCard = () => {
  isFlip.value = !isFlip.value
}
</script>

<template>
  点击试试
  <div class="wrap" @click="flipCard">
    <div class="card bg-[#bfa]" :rotate-y="isFlip ? -180 : 0">A</div>
    <div class="card bg-orange" :rotate-y="isFlip ? 0 : 180">B</div>
  </div>
</template>

<style scoped>
.wrap {
  position: relative;
  width: fit-content;
  height: 100px;
  perspective: 500px;
  cursor: pointer;
}
.card {
  position: absolute;
  width: 100px;
  height: 100px;
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  perspective: 1200px;
}
</style>