CSS3 3D立体柜子实现

1. [图片] 20140811233657.jpg    

2. [图片] 120140811233846.jpg    

3. [代码][CSS]代码     

body {  
    background-color: #efefef;  
}  
#Main {  
    width: 100%;  
    text-align:center;  
    height: 300px;  
    margin: 0 auto;  
    margin-top: 100px;  
}  
.cubic {  
    width: 300px;  
    height: 300px;  
    margin:0 auto;  
    transition-duration: 6s;  
    -webkit-transform-style: preserve-3d;  
    -webkit-transform: rotateX(-10deg) rotateY(-10deg);  
    transform: rotateX(-10deg) rotateY(-10deg);  
    transform-style: preserve-3d;  
    -webkit-animation: run 5s linear infinite;  
}  
.cubicItem {  
    width: 300px;  
    height: 300px;  
    position: absolute;  
    text-align: center;  
    line-height: 300px;  
    font-size: 50px;  
    font-weight: bold;  
    color: #333;  
    background-color: #ccc;  
    transition-duration: 2s;  
}  
.cubicItem:nth-child(1) {  
    -webkit-transform: translateZ(150px);  
    transform: translateZ(150px);  
    -moz-transform: translateZ(150px);  
    -ms-transform: translateZ(150px);  
    -o-transform: translateZ(150px);  
    display: none;  
}  
.cubicItem:nth-child(2) {  
    
    -webkit-transform: rotateX(180deg);  
    transform: rotateX(180deg);  
    -moz-transform: rotateX(180deg);  
    -ms-transform: rotateX(180deg);  
    -o-transform: rotateX(180deg);  
    -webkit-transform: translateZ(-150px);  
    transform: translateZ(-150px);  
    -moz-transform: translateZ(-150px);  
    -ms-transform: translateZ(-150px);  
    -o-transform: translateZ(-150px);  
}  
.cubicItem:nth-child(3) {  
    
    -webkit-transform: rotateY(270deg) translateZ(150px);  
    transform: rotateY(270deg) translateZ(150px);  
    -moz-transform: rotateY(270deg) translateZ(150px);  
    -ms-transform: rotateY(270deg) translateZ(150px);  
    -o-transform: rotateY(270deg) translateZ(150px);  
}  
.cubicItem:nth-child(4) {  
    
    -webkit-transform: rotateY(90deg) translateZ(150px);  
    transform: rotateY(90deg) translateZ(150px);  
    -moz-transform: rotateY(90deg) translateZ(150px);  
    -ms-transform: rotateY(90deg) translateZ(150px);  
    -o-transform: rotateY(90deg) translateZ(150px);  
}  
.cubicItem:nth-child(5) {  
       
    -webkit-transform: rotateX(90deg) translateZ(150px);  
    transform: rotateX(90deg) translateZ(150px);  
    -moz-transform: rotateY(90deg) translateZ(150px);  
    -ms-transform: rotateY(90deg) translateZ(150px);  
    -o-transform: rotateY(90deg) translateZ(150px);  
}  
.cubicItem:nth-child(6) {  
    
    -webkit-transform: rotateX(270deg) translateZ(150px);  
    transform: rotateX(270deg) translateZ(150px);  
    -moz-transform: rotateX(270deg) translateZ(150px);  
    -ms-transform: rotateX(270deg) translateZ(150px);  
    -o-transform: rotateX(270deg) translateZ(150px);  
}