今天就跟大家聊聊有關怎么在微信小程序中實現(xiàn)一個圖片翻轉(zhuǎn)效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司主要業(yè)務有網(wǎng)站營銷策劃、成都網(wǎng)站設計、網(wǎng)站建設、微信公眾號開發(fā)、小程序設計、HTML5、程序開發(fā)等業(yè)務。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務的過程中，公司還積累了豐富的行業(yè)經(jīng)驗、營銷型網(wǎng)站資源和合作伙伴關系資源，并逐漸建立起規(guī)范的客戶服務和保障體系。 

頁面：

<view class='rotateCtn' bindtap='rotateFn'>
 <!--正面的框 -->
 <view class='frame {{class1}}'>
  <image src="{{vo.cover1}}"></image>
 </view>
 <!--背面的框 -->
 <view class='frame {{class2}}'>
  <image src="{{vo.cover2}}"></image>
 </view>
</view>

代碼：

data: {
  class1: 'z1', //默認正面在上面
  class2: 'z2'
 },
rotateFn: function(e) {
  let data = this.data;
  if (data.class1 == 'z1' && data.class2 == 'z2') {
   this.run('front', 'back', 'z2', 'z1');
  } else {
   this.run('back', 'front', 'z1', 'z2');
  }
 },
 run: function(a, b, c, d) {
  let that = this;
  that.setData({
   class1: a,
   class2: b,
  })
  setTimeout(function() {
   that.setData({
    class1: c,
    class2: d,
   })
  }, 1000);
 },

還有樣式：

page{position: relative;height: 100%;background-color: #F6F6F6}
 
.rotateCtn{position: absolute;width: 70%;height: 70%;left: 15%;bottom: 20%;transform-style:preserve-3d;}
.frame{position: absolute;height: 100%;width: 100%;}
.frame image{height: 100%;width: 100%;border-radius: 8px;}
.front{animation:front 1s linear 1;backface-visibility: hidden;}
.back{animation:back 1s linear 1;}
@keyframes front{from{transform: rotateY(0deg);} to{transform: rotateY(180deg);}}
@keyframes back{from{transform: rotateY(-180deg);} to{transform: rotateY(0deg);}}
.z1{z-index:6}
.z2{z-index:5}

看完上述內(nèi)容，你們對怎么在微信小程序中實現(xiàn)一個圖片翻轉(zhuǎn)效果有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：怎么在微信小程序中實現(xiàn)一個圖片翻轉(zhuǎn)效果-創(chuàng)新互聯(lián)
路徑分享：http://www.aaarwkj.com/article24/gcice.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、動態(tài)網(wǎng)站、建站公司、靜態(tài)網(wǎng)站、移動網(wǎng)站建設、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)