hlm_pl_mall_h5/pages/home/marketmanage/Marketzodiac.vue

<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>