html3d盒子,CSS3 3D盒子旋转效果

body{

border:1px solid transparent;

perspective:500px;

height:600px;

}

#wrap{

width:600px;

height:600px;

margin:100px auto;

box-shadow:0 0 3px inset;

}

#box{

width:200px;

height:200px;

position:relative;

top:0;left:0;

transform:translate(50%,50%);

top:100px;left:100px;

transform-style:preserve-3D;

transition:3s;

text-align:center;

}

#wrap:hover #box{

transform:translateZ(-100px) rotateY(270deg);

}

#wrap:hover #box .serface:nth-of-type(1){

transform: rotateX(-45deg);

}

#box .serface{

width:200px;

height:200px;

box-shadow:0 0 10px #3399ff inset;

border-radius:3px;

position:absolute;

top:0;left:0;

line-height:200px;

}

#box .serface:nth-of-type(1){

top:-200px;

transform-origin:bottom;

transform:rotateX(90deg);

transition:3s;

}

#box .serface:nth-of-type(2){

top:200px;

transform-origin:top;

transform:rotateX(-90deg);

}

#box .serface:nth-of-type(3){

left:-200px;

transform-origin:right;

transform:rotateY(-90deg);

}

#box .serface:nth-of-type(4){

left:200px;

transform-origin:left;

transform:rotateY(90deg);

}

#box .serface:nth-of-type(5){

}

#box .serface:nth-of-type(6){

transform:translateZ(-200px);

}

#inner{

width:80px;

height:80px;

position:absolute;

transform:translateZ(-140px);

top:60px;left:60px;

transform-style:preserve-3D;

text-align:center;

transition:3s;

}

#inner .love{

width:80px;

height:80px;

box-shadow:0 0 3px;

position:absolute;

top:0;left:0;

line-height:80px;

box-shadow:0 0 10px #ff3333 outset;

}

#inner .love:nth-of-type(1){

top:-80px;

transform-origin:bottom;

transform:rotateX(-90deg);

background:url("img/1.jpg") center/cover no-repeat;

}

#inner .love:nth-of-type(2){

transform-origin:top;

transform:rotateX(90deg);

top:80px;

background:url("img/2.jpg") center/cover no-repeat;

}

#inner .love:nth-of-type(3){

left:-80px;

transform-origin:right;

transform:rotateY(90deg);

background:url("img/3.jpg") center/cover no-repeat;

}

#inner .love:nth-of-type(4){

transform-origin:left;

transform:rotateY(-90deg);

left:80px;

background:url("img/6.jpg") center/cover no-repeat;

}

#inner .love:nth-of-type(5){

transform-origin:center center;

transform:translateZ(80px);

background:url("img/5.jpg") center/cover no-repeat;

}

#inner .love:nth-of-type(6){

background:url("img/4.jpg") center/cover no-repeat;

}

#wrap:hover #box #inner{

transform:translateZ(-100px) rotateY(270deg);

top:-50%;

}