/*魔方*/
.mofang {
width:60px;
height:60px;
margin:0 auto;
position:fixed;
z-index:999;
-webkit-perspective:1000px;
perspective:1000px;
right:0;
bottom:0;
-webkit-transform:translate(-80%,-80%);
transform:translate(-80%,-80%)
}
.cube {
width:100%;
height:100%;
position:absolute;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);
-webkit-transform-origin:center center -100px;
transform-origin:center center -100px;
-webkit-animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite;
animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite
}
.cube div {
width:80px;
height:80px;
display:block;
margin:0;
position:absolute
}
.cube div a {
color:#fff;
text-decoration:none;
text-align:center;
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
line-height:normal;
font-size:16px;
letter-spacing:3px
}
.cube .front {
-webkit-transform:rotateY(0) translateZ(40px);
transform:rotateY(0) translateZ(40px);
background-color:rgba(0,191,255,.7);
border:2px solid rgba(0,191,255,.7)
}
.cube .back {
-webkit-transform:rotateX(180deg) translateZ(40px);
transform:rotateX(180deg) translateZ(40px);
background-color:rgba(124,252,0,.7);
border:2px solid rgba(124,252,0,.7)
}
.cube .left {
-webkit-transform:rotateY(-90deg) translateZ(40px);
transform:rotateY(-90deg) translateZ(40px);
background-color:rgba(255,215,0,.7);
border:2px solid rgba(255,215,0,.7)
}
.cube .right {
-webkit-transform:rotateY(90deg) translateZ(40px);
transform:rotateY(90deg) translateZ(40px);
background-color:rgba(255,69,0,.7);
border:2px solid rgba(255,69,0,.7)
}
.cube .top {
-webkit-transform:rotateX(90deg) translateZ(40px);
transform:rotateX(90deg) translateZ(40px);
background-color:rgba(255,0,157,.7);
border:2px solid rgba(255,0,157,.7)
}
.cube .xaimian {
-webkit-transform:rotateX(-90deg) translateZ(40px);
transform:rotateX(-90deg) translateZ(40px);
background-color:rgba(184,111,220,.7);
border:2px solid rgba(184,111,220,.7)
}
@-webkit-keyframes around {
100% {
-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)
}
}@keyframes around {
100% {
-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);
transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)
}
}@media only screen and (max-width:767px) {
.mofang {
width:40px;
height:40px;
-webkit-transform:translate(-100%,-100%);
transform:translate(-100%,-100%);
}
.cube div {
width:60px;
height:60px
}
.cube div a {
font-size:12px;
letter-spacing:2px
}
.cube .front {
-webkit-transform:rotateY(0) translateZ(30px);
transform:rotateY(0) translateZ(30px);
}
.cube .back {
-webkit-transform:rotateX(180deg) translateZ(30px);
transform:rotateX(180deg) translateZ(30px)
}
.cube .left {
-webkit-transform:rotateY(-90deg) translateZ(30px);
transform:rotateY(-90deg) translateZ(30px)
}
.cube .right {
-webkit-transform:rotateY(90deg) translateZ(30px);
transform:rotateY(90deg) translateZ(30px)
}
.cube .top {
-webkit-transform:rotateX(90deg) translateZ(30px);
transform:rotateX(90deg) translateZ(30px)
}
.cube .xaimian {
-webkit-transform:rotateX(-90deg) translateZ(30px);
transform:rotateX(-90deg) translateZ(30px)
}
}
