您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“Vue如何实现牌面翻转效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue如何实现牌面翻转效果”吧!
实现一个点击沿中心Y轴翻转的翻转效果。
分前(front)、后(behind)两部分,behind的div通过css布局设定为将其翻转180度在front的div后面隐藏不显示,点击执行翻转动画,在执行翻转动画的时候设置behind的div显示,之后将front的div隐藏.依次反复。
<template> <div id="try"> <!-- box_rolling下执行正面翻转动画 --> <div :class="{"box_rolling":isRolling}" @click="isRolling = !isRolling"> <!-- 前面div --> <div> <div> <img src="@/assets/images/s1.png"/> </div> </div> <!-- 后面div --> <div> <div> <img src="@/assets/images/s2.png"/> </div> </div> </div> </div> </template> <script> export default{ name:"try", data(){ return{ isRolling:false } } } </script> <style> #try{ .rollbox{ position: relative; perspective: 1000px; width:200px; height: 400px; margin:100px auto; &_front, &_behind{ transform-style: preserve-3d; //表示所有子元素在3D空间中呈现 backface-visibility: hidden; //元素背面向屏幕时是否可见 transition-duration:.5s; transition-timing-function:"ease-in"; background:#008080; .contentbox{ width:200px; height: 400px; display: flex; justify-content: center; align-items: center; >img{ width:100px; } } } &_behind{ transform: rotateY(180deg); visibility:hidden; //元素不可见,但占据空间 position: absolute; top:0; bottom:0; right: 0; left: 0; } } .box_rolling{ .rollbox_front{ transform: rotateY(180deg); visibility:hidden; } .rollbox_behind{ transform: rotateY(360deg); visibility:visible; } } } </style>
感谢各位的阅读,以上就是“Vue如何实现牌面翻转效果”的内容了,经过本文的学习后,相信大家对Vue如何实现牌面翻转效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。