微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實例代碼
更新時間：2019年09月20日 09:50:25 作者：囈語的風(fēng)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
老規(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}
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)圖片翻轉(zhuǎn)效果的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了java遇到微信小程序 "支付驗證簽名失敗" 問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹BootStrap 柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-04-04
layui之數(shù)據(jù)表格--與后臺交互獲取數(shù)據(jù)的方法
今天小編就為大家分享一篇layui之數(shù)據(jù)表格--與后臺交互獲取數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
今天小編就為大家分享一篇Layui 解決表格異步調(diào)用后臺分頁的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對象提供了許多方法和屬性,可以通過它們來進行日期的格式化,需要的朋友可以參考下2023-09-09
本文給大家介紹的是不使用構(gòu)造函數(shù)實現(xiàn)"繼承"，非常的簡單，小伙伴們仔細了解下就可以非常熟悉了。2015-04-04
本篇文章主要介紹了director.js實現(xiàn)前端路由，在不刷新的情況下，利用“#”號組織不同的URL路徑，并根據(jù)不同的URL路徑進行不同的方法調(diào)用。有興趣的了解一下。2017-01-01
store.js 是一個兼容所有瀏覽器的 LocalStorage 包裝器，不需要借助 Cookie 或者 Flash。store.js 即可實現(xiàn)本地存儲功能2014-05-05
這篇文章主要介紹了詳解es6超好用的語法糖Decorator，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼
本篇文章主要是對文本框(input)獲取焦點(onfocus)時樣式改變的示例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01