css 魔方,css 3d旋转魔方

/*魔方*/

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

}

}