Vue中利用CSS实现卡片滑动翻转

代码参考：

<script lang="ts" setup>

import {onMounted} from "vue";

onMounted(() => {
  let card = document.querySelector('.card');
  card.addEventListener('click', function () {
    card.classList.toggle('is-flipped');
  });
})

</script>

<template lang="pug">
div.scene
  div.card
    div.a.c front
    div.b.c back
</template>

<style scoped lang="less">
// need
.scene {
  width: 100%;
  height: 100%;
  border: 1px solid #CCC;
  perspective: 600px;
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: right center;
  transition: transform 1s;
}


.card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.c {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.a {
  background: red;
}

.b {
  background: blue;
  transform: rotateY(180deg);
}
</style>

setup是可组合API的入口函数，是在beforeCreated之前执行，所以对dom的操作应该放在onMounted（可参考官网教程Vue3.0 组合式 API 介绍）

更多CSS 3D transforms请参考：https://3dtransforms.desandro.com/