123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694 |
- <template><page-meta :root-font-size="fontSize+'px'"></page-meta>
- <home-base :show="false" ><view class="div home-marketzodiac">
- <view class="div apps-zodiac">
- <view class="div zodiac-wrap">
- <view class="ul zodiac">
- <view class="li zodiac-item zodiac-item1" @click="selectZodiac(1)" :class="{'animated tada flaunt':(active==1),'select':(select==1),'prize':(prize==1),'flipped':(flipped)}"> <view v-if="show && show[0]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'1.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item2" @click="selectZodiac(2)" :class="{'animated tada flaunt':(active==2),'select':(select==2),'prize':(prize==2),'flipped':(flipped)}"> <view v-if="show && show[1]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'2.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item3" @click="selectZodiac(3)" :class="{'animated tada flaunt':(active==3),'select':(select==3),'prize':(prize==3),'flipped':(flipped)}"> <view v-if="show && show[2]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'3.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item4" @click="selectZodiac(4)" :class="{'animated tada flaunt':(active==4),'select':(select==4),'prize':(prize==4),'flipped':(flipped)}"> <view v-if="show && show[3]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'4.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item5" @click="selectZodiac(5)" :class="{'animated tada flaunt':(active==5),'select':(select==5),'prize':(prize==5),'flipped':(flipped)}"> <view v-if="show && show[4]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'5.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item6" @click="selectZodiac(6)" :class="{'animated tada flaunt':(active==6),'select':(select==6),'prize':(prize==6),'flipped':(flipped)}"> <view v-if="show && show[5]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'6.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item7" @click="selectZodiac(7)" :class="{'animated tada flaunt':(active==7),'select':(select==7),'prize':(prize==7),'flipped':(flipped)}"> <view v-if="show && show[6]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'7.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item8" @click="selectZodiac(8)" :class="{'animated tada flaunt':(active==8),'select':(select==8),'prize':(prize==8),'flipped':(flipped)}"> <view v-if="show && show[7]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'8.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item9" @click="selectZodiac(9)" :class="{'animated tada flaunt':(active==9),'select':(select==9),'prize':(prize==9),'flipped':(flipped)}"> <view v-if="show && show[8]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'9.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item10" @click="selectZodiac(10)" :class="{'animated tada flaunt':(active==10),'select':(select==10),'prize':(prize==10),'flipped':(flipped)}"> <view v-if="show && show[9]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'10.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item11" @click="selectZodiac(11)" :class="{'animated tada flaunt':(active==11),'select':(select==11),'prize':(prize==11),'flipped':(flipped)}"> <view v-if="show && show[10]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'11.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- <view class="li zodiac-item zodiac-item12" @click="selectZodiac(12)" :class="{'animated tada flaunt':(active==12),'select':(select==12),'prize':(prize==12),'flipped':(flipped)}"> <view v-if="show && show[11]" class="div zodiac-item-flip"><view class="div zodiac-item-icon zodiac-item-icon-front" :style="'background-image:url('+marketzodiac+'12.png)'"></view><view class="div zodiac-item-icon zodiac-item-icon-back"></view></view></view>
- </view>
- </view>
- <view class="div info-block">
- <view class="div info-area">
- <view class="div view-prize"><text class="a js-view-prize" @click="reset" v-if="canDraw">再来一次</text><text class="a js-view-prize" @click="goLog">查看奖品</text></view>
- <view class="ul activity-info" v-if="marketmanage_info">
- <view>活动名称:
- <view class="div activity-info-content">{{marketmanage_info.marketmanage_name}}</view>
- </view>
- <view>活动介绍:
- <view class="div activity-info-content">{{marketmanage_info.marketmanage_detail}}</view>
- </view>
- <view>活动有效时间:
- <view class="div activity-info-content">{{marketmanage_info.marketmanage_begintime_text}}至{{marketmanage_info.marketmanage_endtime_text}}</view>
- </view>
- <view>活动奖项设置:
- <view class="div activity-info-content">
- <view class="div" v-for="(marketmanageaward,index) in marketmanageaward_list" :key="index">{{marketmanageaward.marketmanageaward_level}}等奖{{marketmanageaward.marketmanageaward_probability}}%:{{marketmanageaward.marketmanageaward_text}}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <uni-popup background-color="#fff" ref="confirm" type="dialog">
- <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
- </uni-popup>
- </home-base>
- </template>
- <script>
- import {getFontSize} from '@/util/common'
- import HomeBase from '../HomeBase'
- import { getMarketmanageInfo, addMarketmanagelog } from '../../../api/homeMarketmanage'
- import { mapState } from 'vuex'
- import { env } from '../../../static/config'
- export default {
- data(){
- return {
- dialog:{},
- show: false,
- active: false,
- select: false,
- prize: false,
- flipped: false,
- marketmanage_id: 0,
- marketmanage_info: false,
- marketmanageaward_list: false,
- isScrape: false,
- isResult: false,
- drawResult: false,
- drawTitle: '真遗憾,未中奖',
- drawContent: '哎呀,肯定姿势不对!',
- canDraw: false,
- time_interval: false,
- marketzodiac: env.SITE_URL+'/uploads/home/h5/home/home-marketzodiac-'
- }
- },
- components:{
- HomeBase,
- },
- computed:{
- fontSize(){
- return getFontSize()
- },
- ...mapState({
- isOnline: state => state.member.isOnline,
- token: state => state.member.token
- })
- },
- onLoad: function (option) {
- this.marketmanage_id = option.marketmanage_id
- if (!this.marketmanage_id) {
- uni.showToast({icon:'none',title: '参数错误'})
- return
- }
- getMarketmanageInfo(this.marketmanage_id, this.token).then(res => {
- this.marketmanage_info = res.result.marketmanage_info
- this.marketmanageaward_list = res.result.marketmanageaward_list
- this.canDraw = res.result.can_draw
- this.drawContent = this.marketmanage_info.marketmanage_failed
- if (!this.canDraw) {
- uni.showToast({icon:'none',title: res.message})
- }
- }).catch(function (error) {
- uni.showToast({icon:'none',title: error.message})
- })
- },
- methods:{
- closeDialog(){
- },
- confirmDialog(value){
- },
- goLog () {
- uni.navigateTo({url:'/pages/member/marketmanagelog/Marketmanagelog'})
- },
- setActive () {
- let _this = this
- this.time_interval = setInterval(function () {
- _this.active = parseInt(Math.random() * 12) % 12 + 1
- }, 3000)
- },
- selectZodiac (index) {
- if (!this.isOnline) {
- uni.navigateTo({url:'/pages/home/memberlogin/Login'})
- return
- }
- if (!this.canDraw) return
- if (!this.isScrape) { // 消耗刮卡机会
- this.isScrape = true
- addMarketmanagelog(this.marketmanage_id).then(res => {
- this.canDraw = res.result.can_draw
- this.isResult = true
- this.select = index
- this.flipped = true
- clearInterval(this.time_interval)
- if (res.result.draw_result) { // 中奖
- this.prize = index
- this.drawResult = true
- this.drawTitle = '恭喜你,获得' + res.result.draw_info.marketmanageaward_level + '等奖'
- this.drawContent = res.result.draw_info.marketmanageaward_text
- } else {
- this.prize = (index + parseInt(Math.random() * 11)) % 12 + 1
- }
- this.dialog={title:this.drawTitle,content:this.drawContent}
- this.$refs.confirm.open()
- }).catch(function (error) {
- uni.showToast({icon:'none',title: error.message})
- })
- }
- },
- reset () {
- // 重置
- this.select = false
- this.prize = false
- this.isScrape = false
- this.flipped = false
- this.drawResult = false
- this.isResult = false
- this.drawTitle = '真遗憾,未中奖'
- this.drawContent = this.marketmanage_info.marketmanage_failed
- this.setActive()
- }
- },
- watch: {
- },
- beforeDestroy: function () {
- clearInterval(this.time_interval)
- },
- mounted () {
- this.show = []
- let _this = this
- this.time_interval = setInterval(function () {
- if (_this.show.length < 12) {
- _this.show.push(true)
- } else {
- clearInterval(_this.time_interval)
- _this.setActive()
- }
- }, 100)
- }
- }
- </script>
- <style scoped lang="scss">
- .tada {
- -webkit-animation-name: tada;
- -moz-animation-name: tada;
- animation-name: tada;
- }
- .animated {
- -webkit-animation-duration: 1s;
- -moz-animation-duration: 1s;
- animation-duration: 1s;
- -webkit-animation-fill-mode: both;
- -moz-animation-fill-mode: both;
- animation-fill-mode: both;
- }
- .animated.infinite {
- -webkit-animation-iteration-count: infinite;
- -moz-animation-iteration-count: infinite;
- animation-iteration-count: infinite
- }
- @-webkit-keyframes tada {
- 0% {
- -webkit-transform: scale(1)
- }
- 10%,20% {
- -webkit-transform: scale(0.9) rotate(-3deg)
- }
- 30%,50%,70%,90% {
- -webkit-transform: scale(1.1) rotate(3deg)
- }
- 40%,60%,80% {
- -webkit-transform: scale(1.1) rotate(-3deg)
- }
- 100% {
- -webkit-transform: scale(1) rotate(0)
- }
- }
- @-moz-keyframes tada {
- 0% {
- -moz-transform: scale(1)
- }
- 10%,20% {
- -moz-transform: scale(0.9) rotate(-3deg)
- }
- 30%,50%,70%,90% {
- -moz-transform: scale(1.1) rotate(3deg)
- }
- 40%,60%,80% {
- -moz-transform: scale(1.1) rotate(-3deg)
- }
- 100% {
- -moz-transform: scale(1) rotate(0)
- }
- }
- @keyframes tada {
- 0% {
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- transform: scale(1)
- }
- 10%,20% {
- -webkit-transform: scale(0.9) rotate(-3deg);
- -moz-transform: scale(0.9) rotate(-3deg);
- transform: scale(0.9) rotate(-3deg)
- }
- 30%,50%,70%,90% {
- -webkit-transform: scale(1.1) rotate(3deg);
- -moz-transform: scale(1.1) rotate(3deg);
- transform: scale(1.1) rotate(3deg)
- }
- 40%,60%,80% {
- -webkit-transform: scale(1.1) rotate(-3deg);
- -moz-transform: scale(1.1) rotate(-3deg);
- transform: scale(1.1) rotate(-3deg)
- }
- 100% {
- -webkit-transform: scale(1) rotate(0);
- -moz-transform: scale(1) rotate(0);
- transform: scale(1) rotate(0)
- }
- }
- .apps-zodiac {
- position: fixed;width:100%;height:100%;background: #77a9af;overflow-y:auto;
- }
- .apps-zodiac .zodiac-wrap {
- position: relative;
- width: 280px;
- padding: 10px 0 40px;
- margin: 0 auto
- }
- .apps-zodiac .zodiac-wrap * {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none
- }
- .apps-zodiac .zodiac .zodiac-item {
- display: inline-block;
- -webkit-perspective: 800;
- -moz-perspective: 800;
- perspective: 800;
- width: 74px;
- height: 74px;
- position: relative;
- margin: 10px 8px
- }
- .apps-zodiac .zodiac .zodiac-item .zodiac-item-flip {
- width: 100%;
- height: 100%;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- transition: 0.5s
- }
- .apps-zodiac .zodiac .zodiac-item .zodiac-item-flip .zodiac-item-icon {
- position: absolute;
- border-radius: 50%;
- width: 66px;
- height: 66px;
- border: 4px solid white;
- -webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2),inset 0 0 5px rgba(0,0,0,0.1);
- box-shadow: 0 1px 2px 1px rgba(0,0,0,0.2),inset 0 0 5px rgba(0,0,0,0.1);
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- backface-visibility: hidden;
- text-align: center;
- line-height: 66px;
- cursor: pointer
- }
- .apps-zodiac .zodiac .zodiac-item .zodiac-item-flip .zodiac-item-icon-front {
- position: absolute;
- z-index: 1
- }
- .apps-zodiac .zodiac .zodiac-item .zodiac-item-flip .zodiac-item-icon-back {
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
- transform: rotateY(-180deg);
- font-size:1.8rem;
- color: #ff0
- }
- .apps-zodiac .zodiac .zodiac-item.flaunt .zodiac-item-icon-front::after {
- content: '点我';
- position: absolute;
- top: 10px;
- right: -20px;
- width: 30px;
- height: 20px;
- z-index: 20;
- text-align: center;
- line-height: 20px;
- font-size:$fontSize;
- background: #444;
- color: #fff
- }
- .apps-zodiac .zodiac .zodiac-item.flaunt .zodiac-item-icon-front::before {
- content: '';
- position: absolute;
- right: 1px;
- top: 22px;
- z-index: 20;
- border: 8px solid transparent;
- border-top-color: #444;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg)
- }
- .apps-zodiac .zodiac .zodiac-item.wave .zodiac-item-flip {
- -webkit-animation: 2s flip reverse infinite linear;
- -moz-animation: 2s flip reverse infinite linear;
- animation: 2s flip reverse infinite linear
- }
- .apps-zodiac .zodiac .zodiac-item.flipped .zodiac-item-flip {
- -webkit-transform: rotateY(-180deg);
- -moz-transform: rotateY(-180deg);
- transform: rotateY(-180deg)
- }
- .apps-zodiac .zodiac .zodiac-item.prize .zodiac-item-icon-back::before {
- content: '奖'
- }
- .apps-zodiac .zodiac .zodiac-item.select .zodiac-item-icon {
- border-color: #ff0
- }
- .apps-zodiac .zodiac .zodiac-item-icon-front {
- background-size: cover
- }
- .apps-zodiac .zodiac .zodiac-item1 .zodiac-item-icon {
- background-color: #30a8c0
- }
- .apps-zodiac .zodiac .zodiac-item2 .zodiac-item-icon {
- background-color: #5f95d5
- }
- .apps-zodiac .zodiac .zodiac-item3 .zodiac-item-icon {
- background-color: #9179b5
- }
- .apps-zodiac .zodiac .zodiac-item4 .zodiac-item-icon {
- background-color: #2bac6b
- }
- .apps-zodiac .zodiac .zodiac-item5 .zodiac-item-icon {
- background-color: #ee7c86
- }
- .apps-zodiac .zodiac .zodiac-item6 .zodiac-item-icon {
- background-color: #cae0a0
- }
- .apps-zodiac .zodiac .zodiac-item7 .zodiac-item-icon {
- background-color: #deb94f
- }
- .apps-zodiac .zodiac .zodiac-item8 .zodiac-item-icon {
- background-color: #a38f48
- }
- .apps-zodiac .zodiac .zodiac-item9 .zodiac-item-icon {
- background-color: #8cbe43
- }
- .apps-zodiac .zodiac .zodiac-item10 .zodiac-item-icon {
- background-color: #6a7dcc
- }
- .apps-zodiac .zodiac .zodiac-item11 .zodiac-item-icon {
- background-color: #84c8a1
- }
- .apps-zodiac .zodiac .zodiac-item12 .zodiac-item-icon {
- background-color: #599ca2
- }
- .apps-zodiac .info-block {
- background-color: #649ea5
- }
- .apps-zodiac .ul.activity-info {
- margin-top: -10px;
- color: #fff;
- padding-top:1rem;
- }
- .apps-zodiac .ul.activity-info .li{padding-bottom: 1rem;}
- .apps-zodiac .ul.activity-info .a.user-center {
- color: #fee25f
- }
- .apps-zodiac .view-prize {
- position: relative;
- top: -35px;
- padding-right: 15px;
- padding-left: 15px;
- overflow: hidden;
- }
- .apps-zodiac .view-prize .a,.apps-zodiac .view-prize .a:hover {
- color: #fee25f
- }
- .apps-zodiac .view-prize .a:last-child{float: right}
- @keyframes flip {
- 0% {
- -webkit-transform: rotate(0) rotateY(0);
- -moz-transform: rotate(0) rotateY(0);
- transform: rotate(0) rotateY(0)
- }
- 8.3% {
- -webkit-transform: rotate(30deg) rotateY(30deg);
- -moz-transform: rotate(30deg) rotateY(30deg);
- transform: rotate(30deg) rotateY(30deg)
- }
- 16.6% {
- -webkit-transform: rotate(60deg) rotateY(60deg);
- -moz-transform: rotate(60deg) rotateY(60deg);
- transform: rotate(60deg) rotateY(60deg)
- }
- 24.9% {
- -webkit-transform: rotate(90deg) rotateY(30deg);
- -moz-transform: rotate(90deg) rotateY(30deg);
- transform: rotate(90deg) rotateY(30deg)
- }
- 33.2% {
- -webkit-transform: rotate(120deg) rotateY(0);
- -moz-transform: rotate(120deg) rotateY(0);
- transform: rotate(120deg) rotateY(0)
- }
- 41.5% {
- -webkit-transform: rotate(150deg) rotateY(-30deg);
- -moz-transform: rotate(150deg) rotateY(-30deg);
- transform: rotate(150deg) rotateY(-30deg)
- }
- 49.8% {
- -webkit-transform: rotate(180deg) rotateY(-60);
- -moz-transform: rotate(180deg) rotateY(-60);
- transform: rotate(180deg) rotateY(-60)
- }
- 58.1% {
- -webkit-transform: rotate(210deg) rotateY(-30deg);
- -moz-transform: rotate(210deg) rotateY(-30deg);
- transform: rotate(210deg) rotateY(-30deg)
- }
- 64.4% {
- -webkit-transform: rotate(240deg) rotateY(0);
- -moz-transform: rotate(240deg) rotateY(0);
- transform: rotate(240deg) rotateY(0)
- }
- 72.7% {
- -webkit-transform: rotate(270deg) rotateY(30deg);
- -moz-transform: rotate(270deg) rotateY(30deg);
- transform: rotate(270deg) rotateY(30deg)
- }
- 83% {
- -webkit-transform: rotate(300deg) rotateY(60deg);
- -moz-transform: rotate(300deg) rotateY(60deg);
- transform: rotate(300deg) rotateY(60deg)
- }
- 91.3% {
- -webkit-transform: rotate(330deg) rotateY(30deg);
- -moz-transform: rotate(330deg) rotateY(30deg);
- transform: rotate(330deg) rotateY(30deg)
- }
- 100% {
- -webkit-transform: rotate(360deg) rotateY(0);
- -moz-transform: rotate(360deg) rotateY(0);
- transform: rotate(360deg) rotateY(0)
- }
- }
- @-webkit-keyframes flip {
- 0% {
- -webkit-transform: rotate(0) rotateY(0);
- transform: rotate(0) rotateY(0)
- }
- 8.3% {
- -webkit-transform: rotate(30deg) rotateY(30deg);
- transform: rotate(30deg) rotateY(30deg)
- }
- 16.6% {
- -webkit-transform: rotate(60deg) rotateY(60deg);
- transform: rotate(60deg) rotateY(60deg)
- }
- 24.9% {
- -webkit-transform: rotate(90deg) rotateY(30deg);
- transform: rotate(90deg) rotateY(30deg)
- }
- 33.2% {
- -webkit-transform: rotate(120deg) rotateY(0);
- transform: rotate(120deg) rotateY(0)
- }
- 41.5% {
- -webkit-transform: rotate(150deg) rotateY(-30deg);
- transform: rotate(150deg) rotateY(-30deg)
- }
- 49.8% {
- -webkit-transform: rotate(180deg) rotateY(-60);
- transform: rotate(180deg) rotateY(-60)
- }
- 58.1% {
- -webkit-transform: rotate(210deg) rotateY(-30deg);
- transform: rotate(210deg) rotateY(-30deg)
- }
- 64.4% {
- -webkit-transform: rotate(240deg) rotateY(0);
- transform: rotate(240deg) rotateY(0)
- }
- 72.7% {
- -webkit-transform: rotate(270deg) rotateY(30deg);
- transform: rotate(270deg) rotateY(30deg)
- }
- 83% {
- -webkit-transform: rotate(300deg) rotateY(60deg);
- transform: rotate(300deg) rotateY(60deg)
- }
- 91.3% {
- -webkit-transform: rotate(330deg) rotateY(30deg);
- transform: rotate(330deg) rotateY(30deg)
- }
- 100% {
- -webkit-transform: rotate(360deg) rotateY(0);
- transform: rotate(360deg) rotateY(0)
- }
- }
- @-moz-keyframes flip {
- 0% {
- -moz-transform: rotate(0) rotateY(0);
- transform: rotate(0) rotateY(0)
- }
- 8.3% {
- -moz-transform: rotate(30deg) rotateY(30deg);
- transform: rotate(30deg) rotateY(30deg)
- }
- 16.6% {
- -moz-transform: rotate(60deg) rotateY(60deg);
- transform: rotate(60deg) rotateY(60deg)
- }
- 24.9% {
- -moz-transform: rotate(90deg) rotateY(30deg);
- transform: rotate(90deg) rotateY(30deg)
- }
- 33.2% {
- -moz-transform: rotate(120deg) rotateY(0);
- transform: rotate(120deg) rotateY(0)
- }
- 41.5% {
- -moz-transform: rotate(150deg) rotateY(-30deg);
- transform: rotate(150deg) rotateY(-30deg)
- }
- 49.8% {
- -moz-transform: rotate(180deg) rotateY(-60);
- transform: rotate(180deg) rotateY(-60)
- }
- 58.1% {
- -moz-transform: rotate(210deg) rotateY(-30deg);
- transform: rotate(210deg) rotateY(-30deg)
- }
- 64.4% {
- -moz-transform: rotate(240deg) rotateY(0);
- transform: rotate(240deg) rotateY(0)
- }
- 72.7% {
- -moz-transform: rotate(270deg) rotateY(30deg);
- transform: rotate(270deg) rotateY(30deg)
- }
- 83% {
- -moz-transform: rotate(300deg) rotateY(60deg);
- transform: rotate(300deg) rotateY(60deg)
- }
- 91.3% {
- -moz-transform: rotate(330deg) rotateY(30deg);
- transform: rotate(330deg) rotateY(30deg)
- }
- 100% {
- -moz-transform: rotate(360deg) rotateY(0);
- transform: rotate(360deg) rotateY(0)
- }
- }
- .info-block{font-size:$fontSize;padding:0 1rem;}
- </style>
|