首先在90s时间内记忆相同的图片位置
90s后覆盖所有图片，选手通过记忆观察所有相同照片的位置进行两两抵消(类似消消乐)
每消错一次，整个图片按照顺时针旋转90°，这里考验选手的记忆力和推理力
有兴趣的小伙伴可以挑战一波了，看看你是不是最强大脑呢~
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../">
<style>
body,html{
height: 100%;
width: 100%;
}
#app{
background: #333;
height: 100%;
width: 100%;
}
.puke-tips {
text-align: center;
font-size: 18px;
color: #fff;
padding-top: 30px;
}
.puke {
width: 400px;
margin: 20px auto;
transition: transform 1s;
transform-origin: center center 0;
}
.puke li {
float: left;
width: 100px;
box-sizing: border-box;
height: 100px;
line-height: 100px;
position: relative;
}
.puke li div {
transition: transform 0.4s;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url("") no-repeat;
color: #58B7FF;
border: 1px solid #ccc;
font-size: 40px;
text-align: center;
}
.puke {
cursor: pointer;
}
.puke li .po1{
background-position: 0 0;
}
.puke li .po2{
background-position: -100px 0;
}
.puke li .po3{
background-position: -200px 0;
}
.puke li .po4{
background-position: -300px 0;
}
.puke li .po5{
background-position: 0 -100px;
}
.puke li .po6{
background-position: -100px -100px;
}
.puke li .po7{
background-position: -200px -100px;
}
.puke li .po8{
background-position: -300px -100px;
}
.puke div {
background: url("data:image/png;base64,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") no-repeat center, #fff;
}
.puke div:first-child {
z-index: 1;
transform: rotateY(0deg);
}
.puke div:last-child {
transform: rotateY(180deg);
}
.puke div:first-child {
transform: rotateY(180deg);
}
.puke div:last-child {
z-index: 1;
transform: rotateY(0deg);
}
/*# sourceMappingURL=../../maps/vue-demos/poker/ */
</style>
</head>
<body>
<div >
<p class="puke-tips">记住牌子，在90秒时间内找出相同的牌子<span v-show="nowTime>0" class="ml30">记忆倒计时：{{nowTime}}</span><span v-show="endTime>0&&nowTime<=0" class="ml30">倒计时：{{endTime}}</span><span v-show="endTime<=0" class="ml30">游戏失败</span></p>
<div class="puke clearfix" :style="{'transform':'rotate( '+pukeRotate+'deg)'}">
<ul>
<li v-for="item,index in puke" @click="pukeDo(item,index)" :class="[isStart||pukeNowIndex===index||pukeErrorIndex===index||()!==-1?'pukeNum':'pukeBg']" :style="{'transform':'rotate( -'+pukeRotate+'deg)'}">
<div class="zero"></div>
<!--<div class="num" :class="{'po'+}"></div>-->
<div class="num" :class="'po'+"></div>
</li>
</ul>
</div>
</div>
</body>
<script src="../"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
//翻牌数组
puke:[],
//第一次翻牌的号码
firstNumber:0,
pukeNowIndex:-1,
pukeErrorIndex:-1,
//已经翻牌的号码
checkEnd:[],
//旋转角度
pukeRotate:0,
isStart:true,
nowTime:15,
endTime:90,
pukeTimer:null,
endTimer:null
},
methods:{
/**
* @description 初始化翻牌
*/
initPuke(){
=!;
if(){
=true;
=15;
=90;
=[];
=[];
=0;
=-1;
=-1;
//准备翻牌数组
let pukeList=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8],pukeText='';
for(let i=0;i<16;i++){
pukeText=((() * ),1)[0];
({
number:pukeText
})
}
//开始数据
=setInterval(()=>{
--;
if(<0){
clearInterval();
=false;
();
}
},1000)
}
else{
clearInterval();
clearInterval();
}
},
/**
* @description 翻牌倒计时
*/
pukeIng(){
=setInterval(()=>{
--;
if(<0){
clearInterval();
clearInterval();
}
},1000);
},
/**
* @description 翻牌操作
* @param val 当前记录
* @param i 当前记录索引
*/
pukeDo(val,i){
//号码是否已经有翻过的记录或者不在有效时间内翻牌
if(||<0||===i||()!==-1){
return;
}
//是否是第一次翻牌
if(===0){
//记录第一次的翻牌信息
=;
=i;
}
else{
//与第一次是否一致
if(===){
()
=-1;
=-1;
//如果长度等于8就是全部已经翻完，游戏成功
if(===8){
alert('游戏成功！');
clearInterval();
clearInterval();
}
}
else{
//翻牌错误，重置
=i;
setTimeout(()=>{
=-1;
=-1;
//进行旋转
+=90;
},400);
}
=0;
}
}
},
mounted:function () {
();
}
});
</script>
</html>
scss:
.puke-tips{
text-align: center;
font-size: 18px;
color: #fff;
}
.puke{
width: 400px;
margin: 20px auto;
transition: transform 1s;
transform-origin: center center 0;
li{
float: left;
width: 100px;
box-sizing: border-box;
height: 100px;
line-height: 100px;
position: relative;
div{
transition: transform 0.4s;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
color: #58B7FF;
border: 1px solid #ccc;
font-size: 40px;
text-align: center;
}
&.pukeBg{
cursor: pointer;
div{
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAABYlAAAWJQFJUiTwAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAABJiSURBVHja7J15lFTVncc/971aunpf6KYXAVFAVFzJEHdRgge3GdeoUUlMojNZNMY9mtHRmUSNmTGLJjGaxAVHHTfGNUPUUVEBYUQUEGWRRZpumt67qmt5y/xxb2Pb/V51NdyqLsDvOXUOp6h+7773vff3+93fdkX1pU+Q56gBJgITgHFAAzAaqALKgBIgqH6bAnqATqAVaAYagfXAWuAT9V3eIpCHY9obOAr4KjANOBQo0HTtBLAMWAwsAt5RROUNRJ6skAOBU4CTgRNyfO/5wMvAS4qsPZaQQuA84AJgZp5M0NeBx4AnlNjLOYwRuOdY4F+BdcCf84gMgOnAfWpsdwD77s6ENAC/BNYAP1WKOV9RCVyvxvpbYPzuRIipCFgDXN3PItpV8ENgtVrVBbs6IWcCq3L1MDmYVB8D5++KhJQBDwHPqP3D7oKx/ZR+za5CyCzgI2A2uy++rp7xjHwn5GZl09ex+6MSeFZZY3lHiACeBm5lz8P1ahIW5Ash1cBS4Cz2XMxSu/yxI03IPsD7wCF8iUnqXUwZKUImAe8B9V9ysR0VwP8hHaI5JWQc0mNa9iUHgxAC3gUOyBUh5eqGpV++e18Eke79ulwQ8ma2NkW7GYqBtxhmzGm4Aaq5wEEj9IAdwAfASqRf7DNk9K8diKnfFKoVPBrpzJygRMfBat+Qa+wD/A8wIxuE/BT4hxw/0Cr1QK8CbwBdOzFbj1UvZhYyIJYrnAjcBVyb0YYuwwDVUcDbOXyIx4E5wItZuv5M4GL1yRVOBv6qQ4cEgRdyNOgH1Oy9IItkAPwN6WubCPwuR8/2LDIhY6cJeVjZ19nEi8BhwKVKR+QKa4AfKD3zTJbvVYD0Eu8UISeQXf9/D/Ad4DS1y80YLgILg7gIERNhYiJMrwhhYeIihjuOj4CzgW8g04eyKbbO2Bkd0kj2PLdvKBm+aUhFh4uLICrCxEQRiDBggxunxI0TcG0AbGHQLSK4ogAZU0oScaIUuXEMdY0MUK2kwqwsPXenukdquFbWjVkk4x7g8qGXr0OCIB1mJRBglN3EtNRaJtlNTLQaGeu0UeH0EEARgkG7Ucwmo4rVZi2fBOpYHhjDVrMWcCizWykghZNeMLSomXwncF0Wnr0MuB24ZjgrpAxoIzsBrBvUw6YlIkmAdrMG3CTTkx9yWvI9pidXMN7aSoUbReCSIkBCBHDUzDdwCbkWISxcBJ2ikE/NGuaH9uf58FReCR0ERoRyayvhoYkBGU//bZYmZR3QlCkhdwNXZmEQPwTu9RdNYGDTZIwCEWZWYiHfj81jRvJDCp0YnUYJHUYRKcwMN1k25U6McqeLuCjg9fAUfhc5iecLjgQsRtvbcDFw01/mW8BfsvAuHlLXHpKQyiwptuuBX/ivCpcUBm2BemqtRu7smcPFvW8ggA1mNQkCQ786HzgIQliMs7chsHmi4FiuK76QjcG9qbAaCWENtVq+lyXzeIzyOGyHWTT13IE/+glwvOYb3wvc5PefJjadoojuQC2z4m8zt+MXHJ94n02B0TQZ5biI4dtNA1aeg0GrUUq3EeGY5HLOTyxgnVnB0vAhpHAocuO4/qQsAcJqt68TIWS00XeFBIFt6PXkLkYmTfuS0WRUgwhwa/ccbo4+SUwUsNEYtV1Z64aFSYPTRonbw12FZ3Jd6WzAoNZuxsFMtw5fQ2/ucUpJpB6/fcg5msmwgZPSKe8ms54yt4fn22/j5p5HaTQq2WRUZY2MPt3SaFTwmVHNtdEnebXtFkbbrTSZDUrApd1HRDUOJQhclG6FzAeO0XjD8/12pyY2TWY9k6z1vNT+c/a1GlkTaMBBDKUrTOAI4HCk53l8v0nUA3wKfIiMZi4Ckuk2lwATrc00mlWcUnEjy4L7MdpuTKdTZg0UMzuJD5He6EGEjEcmGevCm366yMShyRxFudPDktbr2ddqZFVgDGb62Xkg8G1kTtReGY5hC/AUMqn7/XQibLK9mSajnKlVd9JoVlNrN2P7W3PPK++CLhysiPnCNNCdNXKRnzXVJYqAAI90/kaRMZaAPxkN6oUuB64aBhl9tv7lyKyYOfgkTQewWWU2UGu38Vjnr8C1aRelGDjpTGGdONtLh5yp8QaPeLlEBJDCJGZWc0v3I5wWX8CaQEM6fTEbWYZ2iYYxXYjMzb3Mj5TVgQaOSyzjl90PkjArSRBEeIvPVuA3Gt/XOQMJqQWO1ngDb7cADm2BOk7qfZN/iT7FFrM2nZC6W22eCjUr0fvUxxObzDqujj7HWbF5dATqwV+f3ZTuP4eJA1E50H2ETNf40M8DW70sqhajkhqrkT9230+vKKBLRPwU+ENZ8hT04TKlWwY5MWMiTLdRzO+7/8y41Fq2GqMwvUVXjxKDunBCf0KO0Hjh272+TBLAERHu6J7DOKuRDf4P+h/kJlH7bOB+L4Njs1FJjd3KXT2PgAjS61/SojOv94j+hByp6aKfAQu8FHm7Wc2M+AK+GZ/PxkAdprfe+DrwY3KH76rPIH2yPlDPufFFnB6fT6dZ47eSVyq9pAPH9hFSDkzVdNGnvb6MY4JrcUXvPAxsegl5aY4SMoioZQH345HWlCSAg8HlsXkIt5eY/yrRNeaJwF4GMnxpZosQAXSalRyT/JATk8vZYNb4iao/MnJ40EvnbTBHcVzyI76WeJ9us9LP4npa4zgONNBX4RQFFg7eDUvj5uzEuxQ7PSS8Y2JjyXKp2BA4Gdh/sKPJJOzGOSuxWNmInhbhB8iglg5MMJCdE3TgPTzCkj0iTJm9lSNTn9BplPrJ4hsYedzkqfuMUr6aWsMou4lu4VsCskTTGMYbw9z5psMKry97RTEHW5uYYDfTKYrS+bxGGmfhEdLuNArZx27mkNQmEkax398u1zSGBgN9ebre6TsixKHWeqqcbpLCU1VNI/tpRpkggodrPYVJmRtlqvUpaSq6P9A0hhoDGKXpYoPMPylzLSbaTen+7iTyBzO9jBIwGO80Ayk/PbJG0/0r+sxeHdjqSYiboNrpIuWf4DIljwjZ3+vLhAhQY3dhOr3YwtMt36bp/sUGUKTRyvoCLGFS5MapcKIkhS8htXlEiGe7jxQmJW6cQpJY3nGSbtASUSswkHFdHYgP/MJGEMImhI3tH/ApyiNCPMfiYBDAwcTxE1lJ0gTChoGAkQcvQeQRIT5jcXM2WAOflMYdQNjLjk9hYGGkC/bE8oiQXj+WbP+NIcr80iFpbEPjCxkUtwi6NlFRQLtRRMi1/P4un3ogNnu/bYuoKCBGyC+YVqLJ/RQ3kKViOjDKa4W4IkyrUULIX+etyiNCVnsufdemxSjBMgoIuJ4rXdc+Kmog87B0YKIXIRBkrTkacP3Ca6/mESGveWkPgc06swYI+bl+9tZ0/w4DfY4xn7q9FO8HxtEpCgl6r5L56M112mH5DcwbZPbg0CMiLA2MT2fZHqxpDC0GsFnTxTwL5cNOD8sCY1hnjqbM6fV7EXPzgJCXvZR6qdPLerOGZcExBJ1otje3nxnIJsM6MNXLKixxE2wz61gUnECF0+lnqdyeB4T8m5enocrtZHFwH7aY9ZS6vX5/+xVNY1hvoK+RcDkekUdp7jo8E/4KCVHgJ7ZWIAsxRwqL1GeQuLIJMjc8FTD8AmsTkbljOrDGQG+R5ZmDlaKgxG7jlfBhzA9NZpy9zW+VXDKChMz2Wh1j7FYWhibycngqRU6rX0mczgTDlX1KXZf7+FzvDUoKV0S4NzITA9tvlWwmu6k/frgFmYz3BZi4BN0Ef4icSEqUUuwm/P7+PE3j2Ah82uc6eUej6TvFa7aV2luZGzmOZ8PTGG9twfLeR/0a+K8ckvEScNvALy1M9rUa+Wv4cOZEvkaJ0+KXfD0OWc6tA2/1uU7wkp87Ac9CyQgpcG2uLbmYbWY5dU67n8PxPK/9QBawEDh18OQxqHE76TEKuabkYkBQ5L86rtY4ngX9CflfjRe+EA+vqYNBjdPC2uBELi+5hDKni4ib9JPLM/DILNS8Mo7y+g8Tm0q7ix+XXMSK0IFU21v9Jk4pstGBLrzen5ANDLNwPw0MLzEgISi3Gnm8cBb3FJ3KWLsxXXLsuciGN7rxM7UyPG+9l9PG/YUzeaDw7ym1m9J5d3+CvubQn6Li8v2p15lfdBUe3eZcBGFSBJ0Orij5Du+EpjDJavTTJ30vbyrwioYxzVerwpdkgUvYtXgteACIIIVuIl2zgSfJoOlBhniq/2zug+5eH3/y+tLBoMrpxBVBLii/khazlEn2lnSkvIeMdZ+kJk1iGGOwgOfUijgOjzTXvokSci2pK9wUVW4PuKl0QbW+cU1V1tHO4pnP9z79bGBkq1NdHUbPRmbVvz7YV2Iy2m5mY2AMp5TfyEsdP2eyvZlPzDqEmqke+Jv61CHL7o5ANpus5fOStm6kC32ZUtpvMaDseCARDoIGp50kBl1GkTJ4Mw5DtSBL65aw4w7GdfRLMBxYY/iPwB80rpIOZJWpO1g8yFey1axnrLWJxzvv5sjkCjaa9fSKkN+uOJ3ekgswQzgqvLy3tZkFoQO4tmQ2HaKQUjdKs1FGh1GC6R/DGYhKRcqOHGvxhfr9gYQUIzModB4p8QJwurfMlgmazWYthpvknq4H+F7sJTqMMpqM8qyWRVe7XVTZrTwUmckPSi8lalaA0w0EKHJ7KHZ7cYYXcypXpAz3EJga+nncBzYOSKofTNP4/JPUdd/yExulbhcxEeaFyHTWmaOYlVjKGLuFdqMYB0NbHNtRDQgmWY04wuCK0kv559Jvk8Km1m4i4qYocnsJYqdrIuCHOLKL0Dlk3t/xUQYU/Xi11thLo/XQH99AHvXgI3Mc4iJEp1nH5NQq7u5+mFnxxSRFAZvMKmyMnWqtYeLSYLdS4MZ4NXw4V5XM5oPQFErsJgrdRCaNaDJFKbJZwqQMfjuZAQmGfs1nHiY7/QjPAP47ndkpcGk2awCXC3vf4J9i8zg69THCdWgxy+gWkfTF018g2aXYjVPjdACCRcGJ3BeZyV8iJ4AIUmM3bb+rZpQoUvYbrij3I6QefYGrYa2UvtUSE2G6zRrCTgenJpZyenwJR6c+Zi+nlYibwMGkV4RI9bOKBC4BbCJuEhObuAiz2ahkQXASzxVM5cXQYcTMKortFord+FBm7c6iCNl2fL80onx1poQA/Ar4UZYGex2ydSpDERMVBfQYVYDFvtYmDrI2sr+1mf3sRurtdorc+HaLzMYgJsJsMcr5ONDAykADywNjWR0YAyJIkd2mlHXO0tFKlZ9wsocE+qanlEhDSBiZAFGcpcH+JzIGMmTGn8DFxqDTKMQScq+AG6fYjVLkJrbrFgchV5YoBBGROx43RrkTxcTJhmjKBMVIb3pfA+oUMkPHswdxuhZ/CWRB5ONZFF3TkL2o0rpGXNX/pMKJ0pcPYWOQEiZdIjJAZDlUOl2YA7Kb3JFLkOxBHiO7VImvK0jTENqrX1Z/rFAuh2yd41eJjNbVq6WdcdKeoV5+CIuw+oSwCGDviDU2Dtm1O1tHr1rK9+UyRP5AJsL0XHXBbOIypeBuIbdHYBQiy+lWIpsV3JbFezWTQVPNoVYIyNSYFegLVfqhQPm+LkW2Ud2CR82JJuyHDC49qFZGn2fiePXv1xghZEIIyEbDo4G/y9GsPQr4vhKX1UoO7yw5+yM7FN2K7KNyrI/BchwycXpESBnuadELlYIaCaxEBtFWIEvINqpV1MbnGfwBZJ5tPbLB5ARkRuWhDD+Z7Q5kECqnGO75ITPUyxiJqqcD8M6O7OpnOgeV7a/DpLpBXeeGfCYkioxFfIy+7g86Nl/ZwvXqOa/N1cPsyJZ1LXp7a+U7rkEeO563hKD2DNP3IFKuVoZA3hIC8nSDo3OwR8kXXAn8ez4TgvLRHE5+laVlE1chna55Swh83nf23T2ElB9lkxRdfuitan/ypz2IlIfJwlF8ugMD31WuD2cPIOVi5DmFeU0IyJPWDmAE/UE5wDvIrPcluwIhqI3jDGRX6Z7diIik2pccjb5c6JwQ0od7kLHj+3cDMh5Sz5JV0zcXweUtyHjHNGSQZlfDXKS76FvIKgF2dUL6sBjZl/dIPLqA5iEeRbrizySHx84GRuBBF6rPz5BHrF5I+vylXGKtIuIxRqjlx3DjIdnCTOR5HKcy/NzYncUG5NGvL6D3oJZdmpD+OIrPyw2OQP/hls1qhS5CFvG8jb5TDnZJkZWJjd9XFRxChl4nISt890YW6Vcjs82Lkd1E+2IzDjJzJYoshWhBHh+7HplE8Qky8pggT/H/AwDdTJB51I3yTwAAAABJRU5ErkJggg==") no-repeat center,#fff;
&:first-child{
z-index: 1;
transform: rotateY( 0deg);
}
&:last-child{
transform: rotateY( 180deg);
}
}
}
&.pukeNum{
div{
&:first-child{
transform: rotateY( 180deg);
}
&:last-child{
z-index: 1;
transform: rotateY( 0deg);
}
}
}
}
}