Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果

更新時(shí)間：2021年07月22日 14:31:22 作者：心花怒放開到荼蘼

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)牌面翻轉(zhuǎn)效果的具體代碼，供大家參考，具體內(nèi)容如下

1.實(shí)現(xiàn)效果

實(shí)現(xiàn)一個(gè)點(diǎn)擊沿中心Y軸翻轉(zhuǎn)的翻轉(zhuǎn)效果。

2.方法

分前（front）、后(behind)兩部分，behind的div通過css布局設(shè)定為將其翻轉(zhuǎn)180度在front的div后面隱藏不顯示，點(diǎn)擊執(zhí)行翻轉(zhuǎn)動(dòng)畫，在執(zhí)行翻轉(zhuǎn)動(dòng)畫的時(shí)候設(shè)置behind的div顯示，之后將front的div隱藏.依次反復(fù)。

3.具體代碼

<template>
<div id="try">
 <!-- box_rolling下執(zhí)行正面翻轉(zhuǎn)動(dòng)畫   -->
<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空間中呈現(xiàn)
       backface-visibility: hidden;  //元素背面向屏幕時(shí)是否可見
        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;  //元素不可見，但占據(jù)空間
      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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實(shí)現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
element?upload?鉤子函數(shù)的坑及解決
這篇文章主要介紹了element?upload?鉤子函數(shù)的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
自定義input組件如何實(shí)現(xiàn)拖拽文件上傳
這篇文章主要介紹了自定義input組件如何實(shí)現(xiàn)拖拽文件上傳問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue3中自定義事件總線的實(shí)現(xiàn)代碼
隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應(yīng)對這種變化,我們可以選擇在 Vue 3 應(yīng)用中實(shí)現(xiàn)自定義的“事件總線”機(jī)制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下
2024-05-05
Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦)
這篇文章主要介紹了Elemenu中el-table中使用el-popover選中關(guān)閉無效解決辦法(最新推薦),因?yàn)樵趀l-table-column里,因?yàn)槭嵌嘈?使用trigger="manual"?時(shí),用v-model="visible"來控制時(shí),控件找不到這個(gè)值,才換成trigger="click",需要的朋友可以參考下
2024-03-03
Vue解讀之響應(yīng)式原理源碼剖析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-10-10
Vue應(yīng)用中504錯(cuò)誤（Gateway timeout）的原因與解決方法
在Vue前端應(yīng)用中遇到504代理錯(cuò)誤通常是由于請求在到達(dá)服務(wù)器之前超時(shí),504錯(cuò)誤表示網(wǎng)關(guān)超時(shí),可能由后端服務(wù)響應(yīng)慢、網(wǎng)絡(luò)問題、代理配置錯(cuò)誤、請求負(fù)載過大、前端請求超時(shí)設(shè)置不當(dāng)、服務(wù)器資源不足或第三方服務(wù)問題引起
2024-09-09
在Vue3中實(shí)現(xiàn)懶加載功能的代碼示例
在現(xiàn)代前端開發(fā)中,懶加載是一種提高應(yīng)用性能和用戶體驗(yàn)的重要技術(shù),尤其是在處理較大圖片或長列表數(shù)據(jù)時(shí),本文將使用 Vue 3 和其新推出的 setup 語法糖來實(shí)現(xiàn)懶加載功能,并提供具體的示例代碼,需要的朋友可以參考下
2024-09-09
vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式
這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記
地圖多點(diǎn)標(biāo)注其實(shí)是個(gè)非常簡單的問題,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)高德地圖添加多個(gè)點(diǎn)標(biāo)記的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06