首页 > 其他分享 >3d翻转动画 vue3 ts

3d翻转动画 vue3 ts

时间:2023-06-16 10:11:06浏览次数:42  
标签:100% transform ts width background vue3 cards height 3d

<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>```

标签:100%,transform,ts,width,background,vue3,cards,height,3d
From: https://www.cnblogs.com/xxdmua/p/17484883.html

相关文章

  • Kubernets 调度常用的命令-马哥教育
    taints内容包括key、value、effect:key就是配置的键值value就是内容effect是标记了这个taints行为是什么目前Kubernetes里面有三个taints行为:NoSchedule禁止新的Pod调度上来PreferNoSchedul尽量不调度到这台k8s的master节点本身就带有effect类型为NoSchedule的污......
  • .js .jsx .ts .tsx的区别
    .js是javascript文件的扩展名,例如main.js。.jsx是javascript文件并表明使用了JSX语法。.ts是typescript文件的扩展名.tsx表明是typescript文件并使用了JSX语法。https://zhuanlan.zhihu.com/p/435385184......
  • Vue3 —— 商城项目
    create-vuecreate-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供极速响应。执行如下命令,这一指令将会安装并执行create-vuenpminitvue@latest无论您之前是否安装过create-vue,执行npminitvue@latest命令都会创建一个新的Vue项目。这个命令会......
  • 「解题报告」CF1738H Palindrome Addicts
    神秘回文串题。首先容易发现要求的是区间本质不同回文串个数,所以直接上论文做法即可。容易想到增量构建回文自动机,假如现在建出了\([1,r]\)的PAM,考虑有多少回文串出现在了\([l,r]\)内。考虑记录每个回文串的最后一次出现位置\(last_p\),那么这个串的左端点就是\(last_p......
  • 使用lupdate命令清空qt工程里面的.ts文件多余的无效翻译,终端提示没有找到lupdate命令
    使用lupdate命令清空qt工程里面的.ts文件多余的无效翻译,终端提示没有找到lupdate命令实验平台:Ubuntu16.04解决过程:1.在终端中使用lupdatexxx.pro-no-obsolete命令2.终端提示在/usr/lib/x86_64-linux-gnu/qt4/bin没有找到lupdate命令3.该提示表明没有安装相......
  • 轻松掌握Python+主流测试框架Requests接口自动化,快速转型自动化测试
    轻松掌握Python+主流测试框架Requests接口自动化,快速转型自动化测试最近几年,自动化测试已经成为了软件测试的主流趋势,而Python语言和Requests库作为主流测试框架,也成为了越来越多测试工程师的首选。使用Python+Requests接口自动化进行测试,不仅可以提高测试效率和覆盖面,还可以降低......
  • Echarts
    Echarts国内同步镜像网站:https://www.isqqw.com/echarts-doc/zh/tutorial.html一、引用main.js 创建全局变量import*asechartsfrom'echarts'Vue.prototype.$echarts=echarts二、使用 ......
  • echarts飞行航线图学习
    第一次接触这个理解可能不一定正确后面如果我发现有问题会更正1.npm安装echarts npminstallecharts--saveimport*asechartsfrom'echarts'//这里我在data里定义了一个也可不定义根据使用方法灵活调整this.myChart=echarts.init(this.$refs......
  • 虚拟机内安装Ubuntu 22.04.2 LTS
    Ubuntu系统下载|Ubuntu文件->新建虚拟机-> 下一步: 下一步: 下一步: 下一步: 注:路径用全英文下一步: 下一步: 下一步:下一步: 下一步: 下一步:下一步: 下一步: 下一步: 自定义硬件: 注:移除打印机新CD/DVD(SATA)->使用ISO映像文件->浏览关闭......
  • 深入Struts2
    深入Struts2                                                ++YONG原创,转载请注明1.   深入Struts2的配置文件本部分主要介绍struts.xml的常用配置。1.1.   包配置:Struts2框架中核......