ios判断，红包修改

pages/index/prizeDraw/choujiangcanvas.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="lottery-container">
+    <!-- 抽奖圆盘 -->
+    <view class="lottery-wheel" @click="startLottery">
+      <view class="lottery-item" v-for="(item, index) in lotteryItems" :key="index">
+        <image :src="item.icon" mode="aspectFit"></image>
+        <text>{{ item.name }}</text>
+      </view>
+      <view class="start-btn">开始抽奖</view>
+    </view>
+    <!-- 剩余抽奖次数 -->
+    <view class="lottery-info">
+      <text>剩余免费抽奖{{ remainingTimes }}次</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 抽奖项目数据
+const lotteryItems = [
+  {
+    name: '现金红包',
+    icon: 'https://example.com/red-envelope-icon.png'
+  },
+  {
+    name: '平板',
+    icon: 'https://example.com/tablet-icon.png'
+  },
+  {
+    name: '爱奇艺会员',
+    icon: 'https://example.com/iqiyi-icon.png'
+  },
+  {
+    name: '淘宝优惠券',
+    icon: 'https://example.com/taobao-coupon-icon.png'
+  },
+  {
+    name: '京东优惠券',
+    icon: 'https://example.com/jd-coupon-icon.png'
+  },
+  {
+    name: '拼多多优惠券',
+    icon: 'https://example.com/pdd-coupon-icon.png'
+  }
+];
+
+// 剩余抽奖次数
+const remainingTimes = ref(2);
+
+// 开始抽奖函数
+const startLottery = () => {
+  if (remainingTimes.value > 0) {
+    // 这里可以添加实际的抽奖逻辑，例如随机选择一个奖项
+    // 以下只是模拟抽奖过程
+    const randomIndex = Math.floor(Math.random() * lotteryItems.length);
+    const selectedItem = lotteryItems[randomIndex];
+    console.log('恭喜你获得：', selectedItem.name);
+    remainingTimes.value--;
+  } else {
+    uni.showToast({
+      title: '抽奖次数已用完',
+      icon: 'none'
+    });
+  }
+}
+</script>
+<style lang="scss">
+.lottery-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.lottery-wheel {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+  background-color: #ffd700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.lottery-item {
+  width: 50%;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+}
+
+.lottery-item:nth-child(1) {
+  transform: rotate(0deg);
+}
+
+.lottery-item:nth-child(2) {
+  transform: rotate(60deg);
+}
+
+.lottery-item:nth-child(3) {
+  transform: rotate(120deg);
+}
+
+.lottery-item:nth-child(4) {
+  transform: rotate(180deg);
+}
+
+.lottery-item:nth-child(5) {
+  transform: rotate(240deg);
+}
+
+.lottery-item:nth-child(6) {
+  transform: rotate(300deg);
+}
+
+.start-btn {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: #ff4500;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 18px;
+}
+
+.lottery-info {
+  margin-top: 20px;
+}
+</style>

pages/index/prizeDraw/kevy-luckydraw.vue

@@ -0,0 +1,523 @@
+<template>
+	<view class="content">
+		<view class="t-bg" style="">
+			<image class="t-wan" src="./luck/wenan.png"></image>
+			<image class="t-wan-lp" src="./luck/hengfu.png"></image>
+			<view class="t-choujiang t-flex-row" style="background-image:url('./luck/BJ.png')">
+				<choujiangcanvas v-if="list.length" ref="lucky" startText="开始" :wIndex="0" :luckyList="list"
+					@onReadyStart="onReadyStart" @lotteryData="getLotterData"></choujiangcanvas>
+			</view>
+		</view>
+		<!-- 规则部分 -->
+		<view class="t-bottom">
+			<view class="t-luck-wrapper">
+				<view class="t-jh t-flex-row" style="background-image:url('./luck/anniu.png')">
+					剩余免费抽奖{{luckDrawTimes}}次
+				</view>
+				<!-- <view class="t-fuhuo-text t-flex-row">{{freeNumDay}}</view> -->
+				<view class="t-fh-fs t-flex-row-sb">
+					<view class="t-flex-row" @tap='goUrl("/pages/me/withdraw/index")' hover-class="t-click-class">红包 &nbsp;{{totalMoney}}</view>
+					<button open-type="share" @tap='goUrl("/pages/task/prizeList?source=2")' class="t-share t-flex-row t-plain-btn"
+						hover-class="t-click-class">我的奖品</button>
+				</view>
+				<view class="t-line"></view>
+				<view class="t-r-title t-flex-row">活动规则</view>
+				<view class="t-rule">
+					<text>1.抽奖细则：每日前{{ freeNumDay }}次付款均可获得抽奖机会</text>
+					<text>2.奖励说明：红包奖励将自动发放到红包余额，已绑定支付宝账号将会自动发起提现。其余奖品则需联系客服领取。</text>
+				</view>
+			</view>
+		</view>
+		<!-- 抽奖结束弹窗 -->
+		<kevy-mask :show="isShowAwd" @click="toConfirmAwd">
+			<view class="t-full t-flex-row">
+				<view class="t-tk-modal">
+					<view class="t-tk-bg t-bg-full" style="background-image:url('./luck/tankuang.png')">
+						<view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
+							<image src="./luck/xiexiecanyu.png"></image>
+							<view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
+						</view>
+						<view v-if="drawIdx!=null && drawIdx > 0" class="t-tk-zj t-flex-col-s">
+							<image class="t-tk-zj-tip" src="./luck/wenzi.png"></image>
+							<view class="t-tk-zj-desc t-flex-col">
+								<image class="t-zj-jp" :src="'./luck/'+drawIdx+'.png'"></image>
+								<view class="t-zj-jp-desc">某某公司提供的能量动力
+									{{drawIdx==5?"探亲礼包":(drawIdx==4?"加油卡":(drawIdx==3?"鸡腿":(drawIdx==2?"方便面":"矿泉水")))}}，同等价值{{drawIdx==5?"888":(drawIdx==4?"100":(drawIdx==3?"10":(drawIdx==2?"5":"2")))}}元现金已到账微信零钱
+								</view>
+							</view>
+						</view>
+					</view>
+					<view @click="toConfirmAwd" class="t-tk-btn t-bg-full"
+						style="background-image:url('./luck/xiaoanniu.png')">
+						{{drawIdx > 0?"领取":"确定"}}
+					</view>
+				</view>
+			</view>
+		</kevy-mask>
+	</view>
+</template>
+
+<script>
+	import {
+		drawCount,
+		selectUserMoney,
+		selectDiscSpinning,
+		discSpinningdraw
+	} from '@/api/index/index.js';
+	import choujiangcanvas from './choujiangcanvas.vue'
+	var animation = uni.createAnimation({
+		duration: 4000,
+		timingFunction: 'ease-out'
+	});
+	import kevyMask from './kevy-mask.vue';
+	export default {
+		components: {
+			kevyMask,
+			choujiangcanvas
+		},
+		data() {
+			return {
+				totalMoney: 0, //红包
+				rotate: 0, //度数-抽奖动画
+				turning: false, //转盘是否正在转
+				luckDrawTimes: 0, //抽奖机会，5代表可以抽5次
+				isShowAwd: false, //是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
+				drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
+				// 每天免费抽奖次数
+				freeNumDay: 0,
+				list: []
+			}
+		},
+		onLoad() {
+			this.getRedPack();
+			this.getCount();
+			this.getPrizeList();
+		},
+		methods: {
+			goUrl(url){
+				uni.navigateTo({
+					url
+				})
+			},
+			async onReadyStart() {
+				// 后台处理获得开奖数据
+				const res = await discSpinningdraw({
+					source: 1
+				});
+				console.log(res, 'debug')
+				this.wIndex = 2
+				// this.$refs.lucky.o n S t a r t() 
+				this.$refs.lucky.onStart() // 官方大大把这个过滤掉了o.n.S.t.a.r.t()
+			},
+			getLotterData(data) {
+				console.log(data, 'debugger')
+			},
+			// 抽奖次数
+			async getCount() {
+				const res = await drawCount({
+					source: 1
+				});
+				// this.luckDrawTimes = 10;
+				this.luckDrawTimes = res.count || 0;
+				this.freeNumDay = res.sum || 0;
+			},
+			// 红包
+			async getRedPack() {
+				const res = await selectUserMoney();
+				this.totalMoney = res.amount;
+			},
+			// 获取奖品列表
+			async getPrizeList() {
+				const res = await selectDiscSpinning({
+					source: 1
+				});
+				this.list = res.records
+			},
+
+			/**
+			 * 确认奖品按钮点击事件
+			 */
+			toConfirmAwd() {
+				//这里中奖信息关闭弹框
+				this.isShowAwd = false;
+
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.t-bg {
+		background-image:url('./luck/DZP_BJ.png');
+		width: 100%;
+		box-sizing: border-box;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		position: relative;
+		overflow-x: hidden;
+		height: 1200rpx;
+		padding-top: 345rpx;
+		/* margin-top: 40rpx; */
+	}
+
+	.t-overlay {
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 9999;
+		background: rgba(0, 0, 0, 0.3);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: row;
+		transition: all 0.5s;
+	}
+
+	.t-wan {
+		position: absolute;
+		width: 100%;
+		height: 283rpx;
+		top: 12rpx;
+		left: 0;
+		z-index: 1;
+	}
+
+	.t-wan-lp {
+		position: absolute;
+		width: 370rpx;
+		height: 130rpx;
+		top: 223rpx;
+		z-index: 0;
+		left: calc(50% - 185rpx);
+	}
+
+	.t-choujiang {
+		width: 630rpx;
+		height: 630rpx;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		margin: 0rpx auto;
+		position: relative;
+	}
+
+	.t-zp {
+		width: 577rpx;
+		height: 577rpx;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		transform-origin: 0% 100%;
+	}
+
+	.t-start {
+		width: 146rpx;
+		height: 171rpx;
+		position: absolute;
+		z-index: 1;
+	}
+
+	.t-jh {
+		width: 456rpx;
+		height: 120rpx;
+		margin: 0 auto;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		font-size: 40rpx;
+		color: #980100;
+	}
+
+	.t-fuhuo-text {
+		font-size: 30rpx;
+		color: #980100;
+		width: 100%;
+		height: 42rpx;
+		margin-top: 14rpx;
+	}
+
+	.t-fh-fs {
+		width: 580rpx;
+		height: 100rpx;
+		margin: 20rpx auto 0rpx;
+	}
+
+	.t-fh-fs view {
+		width: 250rpx;
+		height: 100rpx;
+		background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
+		border-radius: 10rpx;
+		font-size: 30rpx;
+		color: #FFFFFF;
+	}
+
+	.t-share {
+		width: 250rpx;
+		height: 100rpx;
+		background-image: linear-gradient(180deg, #DF0236 0%, #DD0227 100%);
+		border-radius: 10rpx;
+		font-size: 30rpx;
+		color: #FFFFFF;
+	}
+
+	.t-bottom {
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+		opacity: 0.99;
+		background: #FDC469;
+	}
+
+	.t-luck-wrapper {
+		position: relative;
+		box-sizing: border-box;
+		top: -219rpx;
+	}
+
+	.t-line {
+		width: 580rpx;
+		height: 1rpx;
+		margin: 50rpx auto 0rpx;
+		background: #980100;
+	}
+
+	.t-r-title {
+		font-size: 28rpx;
+		color: #980100;
+		height: 40rpx;
+		width: 100%;
+		margin: 30rpx auto 0rpx;
+		width: 585rpx;
+	}
+
+	.t-rule {
+		margin: 10rpx auto 0rpx;
+		width: 585rpx;
+	}
+
+	.t-rule text {
+		font-size: 28rpx;
+		color: #980100;
+		text-align: justify;
+		display: block;
+	}
+
+	.t-wrapper {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		top: 0rpx;
+	}
+
+	.t-video-con {
+		width: 100%;
+		height: 422rpx;
+		background: #fff;
+		position: relative;
+	}
+
+	.t-video {
+		width: 100%;
+		height: 100%;
+	}
+
+	.t-close {
+		position: absolute;
+		top: 0rpx;
+		right: 0rpx;
+		width: 34rpx;
+		height: 34rpx;
+		padding: 30rpx;
+		z-index: 9999;
+	}
+
+	.t-nocice {
+		position: fixed;
+		left: 0rpx;
+		top: 0rpx;
+		z-index: 999;
+		width: 100%;
+		height: 40rpx !important;
+		box-sizing: border-box;
+		font-size: 30rpx;
+	}
+
+	.t-tk-modal {
+		width: 632rpx;
+		height: 588rpx;
+		position: relative;
+		box-sizing: border-box;
+	}
+
+	.t-tk-bg {
+		width: 100%;
+		height: 528rpx;
+		background-size: 100% 100%;
+	}
+
+	.t-tk-btn {
+		width: 336rpx;
+		height: 120rpx;
+		position: absolute;
+		bottom: 0rpx;
+		left: calc(50% - 168rpx);
+		font-size: 40rpx;
+		color: #980100;
+		line-height: 120rpx;
+		text-align: center;
+		background-size: 100% 100%;
+	}
+
+	.t-flex-row {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.t-flex-row-sa {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+	.t-flex-row-sb {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.t-flex-row-s {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.t-flex-row-s-s {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
+
+	.t-flex-row-s-e {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: flex-end;
+	}
+
+	.t-flex-row-e {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		line-height: 60rpx;
+	}
+
+	.t-flex-col {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.t-flex-col-sa {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+	.t-flex-col-sb {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.t-flex-col-s {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.t-flex-col-s-s {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+	}
+
+	.t-flex-col-s-e {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-end;
+	}
+
+	.t-flex-col-e {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.t-xxcy image {
+		width: 400rpx;
+		height: 148rpx;
+		margin-top: 139rpx;
+	}
+
+	.t-xxcy-ts {
+		width: 510rpx;
+		height: 100rpx;
+		background: #FEF2CD;
+		border-radius: 20rpx;
+		font-size: 30rpx;
+		color: #D93637;
+		margin-top: 43rpx;
+	}
+
+	.t-tk-zj {}
+
+	.t-tk-zj-tip {
+		width: 347rpx;
+		height: 106rpx;
+		margin-top: 44rpx;
+	}
+
+	.t-tk-zj-desc {
+		width: 474rpx;
+		height: 281rpx;
+		background: #FEF2CD;
+		border-radius: 20rpx;
+		margin-top: 2rpx;
+	}
+
+	.t-zj-jp {
+		width: 264rpx;
+		height: 157rpx;
+	}
+
+	.t-zj-jp-desc {
+		font-size: 24rpx;
+		color: #D93637;
+		text-align: justify;
+		width: 420rpx;
+	}
+
+	.t-click-class {
+		opacity: 0.7;
+	}
+</style>

pages/index/prizeDraw/kevy-mask.vue

@@ -0,0 +1,355 @@
+<template>
+	<view class="content">
+		<view class="t-mask"
+			:style="{opacity:show?'1':'0','z-index':zIndex,'left':show?'0rpx':'200%','transition-duration':duration?(duration+'s'):'0.3s'}"
+			@click.stop="maskClick" @mousemove.stop>
+			<view :class="['t-wrap',aniType,{'show':show}]">
+				<view :style="[contentStyle]" @click.stop>
+					<slot></slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "KevyMask",
+		props: {
+			/**
+			 * 是否显示
+			 */
+			show: {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * 是否开启点击遮罩关闭
+			 */
+			maskClose: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * 层级
+			 */
+			zIndex: {
+				type: Number,
+				default: 10
+			},
+			/**
+			 * 动画时长，单位秒
+			 */
+			duration: {
+				type: [String, Number],
+				default: 0.3
+			},
+			/**
+			 * 嵌入内容css类名
+			 */
+			contentStyle: {
+				type: Object,
+				default: () => {}
+			},
+			/**
+			 * 动画类型（13种）：fadeInAndScaleUp、slideFromRight、slideFromBottom、newspaper、fall、sideAndFall、flipH3d、flipV3d、sign3d、superScale、slit3d、rotateFromBottom3d、rotateFromLeft3d
+			 */
+			aniType: {
+				type: String,
+				default: 'fadeInAndScaleUp'
+			},
+		},
+		data() {
+			return {
+				isRm:false
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			//遮罩点击
+			maskClick() {
+				if (this.maskClose) {
+					this.$emit("click");
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		width: 100%;
+		box-sizing: border-box;
+		height: 0rpx;
+		overflow: hidden;
+
+
+		.t-mask {
+			position: fixed;
+			top: 0rpx;
+			left: 0rpx;
+			background: rgba(0, 0, 0, 0.6);
+			margin: 0rpx;
+			padding: 0rpx;
+			transition-property: opacity;
+			transition-timing-function: ease-in;
+			-webkit-perspective: 1300rpx;
+			perspective: 1300rpx;
+			-webkit-backface-visibility: hidden;
+			backface-visibility: hidden;
+
+
+			.t-wrap {
+				min-width: 100vw;
+				min-height: 100vh;
+				overflow: hidden;
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+				align-items: center;
+
+				//fadeInAndScaleUp
+				&.fadeInAndScaleUp {
+					-webkit-transform: scale(0.7);
+					transform: scale(0.7);
+					opacity: 0;
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+
+					&.show {
+						-webkit-transform: scale(1);
+						transform: scale(1);
+						opacity: 1;
+					}
+				}
+
+				//slideFromRight
+				&.slideFromRight {
+					-webkit-transform: translateX(20%);
+					transform: translateX(20%);
+					opacity: 0;
+					-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+					transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
+
+					&.show {
+						-webkit-transform: translateX(0);
+						transform: translateX(0);
+						opacity: 1;
+					}
+				}
+
+				//slideFromBottom
+				&.slideFromBottom {
+					-webkit-transform: translateY(20%);
+					transform: translateY(20%);
+					opacity: 0;
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+
+					&.show {
+						-webkit-transform: translateY(0);
+						transform: translateY(0);
+						opacity: 1;
+					}
+				}
+
+				//newspaper
+				&.newspaper {
+					-webkit-transform: scale(0) rotate(720deg);
+					transform: scale(0) rotate(720deg);
+					opacity: 0;
+					-webkit-transition: all 0.5s;
+					transition: all 0.5s;
+
+					&.show {
+						-webkit-transform: scale(1) rotate(0deg);
+						transform: scale(1) rotate(0deg);
+						opacity: 1;
+					}
+				}
+
+				//fall
+				&.fall {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: translateZ(600px) rotateX(20deg);
+					transform: translateZ(600px) rotateX(20deg);
+					opacity: 0;
+
+					&.show {
+						-webkit-transition: all 0.3s ease-in;
+						transition: all 0.3s ease-in;
+						-webkit-transform: translateZ(0px) rotateX(0deg);
+						transform: translateZ(0px) rotateX(0deg);
+						opacity: 1;
+					}
+				}
+
+				//sideAndFall
+				&.sideAndFall {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
+					transform: translate(30%) translateZ(600px) rotate(10deg);
+					opacity: 0;
+
+					&.show {
+						-webkit-transition: all 0.3s ease-in;
+						transition: all 0.3s ease-in;
+						-webkit-transform: translate(0%) translateZ(0) rotate(0deg);
+						transform: translate(0%) translateZ(0) rotate(0deg);
+						opacity: 1;
+					}
+				}
+
+				//flipH3d
+				&.flipH3d {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: rotateY(-70deg);
+					transform: rotateY(-70deg);
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+					opacity: 0;
+
+					&.show {
+						-webkit-transform: rotateY(0deg);
+						transform: rotateY(0deg);
+						opacity: 1;
+					}
+				}
+
+				//flipV3d
+				&.flipV3d {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: rotateX(-70deg);
+					transform: rotateX(-70deg);
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+					opacity: 0;
+
+					&.show {
+						-webkit-transform: rotateX(0deg);
+						transform: rotateX(0deg);
+						opacity: 1;
+					}
+				}
+
+				//sign3d
+				&.sign3d {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: rotateX(-60deg);
+					transform: rotateX(-60deg);
+					-webkit-transform-origin: 50% 0;
+					transform-origin: 50% 0;
+					opacity: 0;
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+
+					&.show {
+						-webkit-transform: rotateX(0deg);
+						transform: rotateX(0deg);
+						opacity: 1;
+					}
+				}
+
+				//superScale
+				&.superScale {
+					-webkit-transform: scale(2);
+					transform: scale(2);
+					opacity: 0;
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+
+					&.show {
+						-webkit-transform: scale(1);
+						transform: scale(1);
+						opacity: 1;
+					}
+				}
+
+				//slit3d
+				&.slit3d {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: translateZ(-3000px) rotateY(90deg);
+					transform: translateZ(-3000px) rotateY(90deg);
+					opacity: 0;
+
+					&.show {
+						-webkit-animation: slit .7s forwards ease-out;
+						animation: slit .7s forwards ease-out;
+					}
+				}
+
+				@-webkit-keyframes slit {
+					50% {
+						-webkit-transform: translateZ(-250px) rotateY(89deg);
+						opacity: .5;
+						-webkit-animation-timing-function: ease-out;
+					}
+
+					100% {
+						-webkit-transform: translateZ(0) rotateY(0deg);
+						opacity: 1;
+					}
+				}
+
+				@keyframes slit {
+					50% {
+						transform: translateZ(-250px) rotateY(89deg);
+						opacity: 1;
+						animation-timing-function: ease-in;
+					}
+
+					100% {
+						transform: translateZ(0) rotateY(0deg);
+						opacity: 1;
+					}
+				}
+
+				//rotateFromBottom3d
+				&.rotateFromBottom3d {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: translateY(100%) rotateX(90deg);
+					transform: translateY(100%) rotateX(90deg);
+					-webkit-transform-origin: 0 100%;
+					transform-origin: 0 100%;
+					opacity: 0;
+					-webkit-transition: all 0.3s ease-out;
+					transition: all 0.3s ease-out;
+
+					&.show {
+						-webkit-transform: translateY(0%) rotateX(0deg);
+						transform: translateY(0%) rotateX(0deg);
+						opacity: 1;
+					}
+				}
+
+				//rotateFromLeft3d
+				&.rotateFromLeft3d {
+					-webkit-transform-style: preserve-3d;
+					transform-style: preserve-3d;
+					-webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+					transform: translateZ(100px) translateX(-30%) rotateY(90deg);
+					-webkit-transform-origin: 0 100%;
+					transform-origin: 0 100%;
+					opacity: 0;
+					-webkit-transition: all 0.3s;
+					transition: all 0.3s;
+
+					&.show {
+						-webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
+						transform: translateZ(0px) translateX(0%) rotateY(0deg);
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
+</style>