Vue實現牌面翻轉效果
本文實例為大傢分享瞭Vue實現牌面翻轉效果的具體代碼,供大傢參考,具體內容如下
1.實現效果
實現一個點擊沿中心Y軸翻轉的翻轉效果。
2.方法
分前(front)、後(behind)兩部分,behind的div通過css佈局設定為將其翻轉180度在front的div後面隱藏不顯示,點擊執行翻轉動畫,在執行翻轉動畫的時候設置behind的div顯示,之後將front的div隱藏.依次反復。
3.具體代碼
<template> <div id="try"> <!-- box_rolling下執行正面翻轉動畫 --> <div class="rollbox" :class="{'box_rolling':isRolling}" @click="isRolling = !isRolling"> <!-- 前面div --> <div class="rollbox_front"> <div class="contentbox"> <img src="@/assets/images/s1.png"/> </div> </div> <!-- 後面div --> <div class="rollbox_behind"> <div class="contentbox"> <img src="@/assets/images/s2.png"/> </div> </div> </div> </div> </template> <script> export default{ name:'try', data(){ return{ isRolling:false } } } </script> <style lang='scss'> #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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。