用css3繪製3d相冊

佈局：

樣式：
*{
margin: 0;
padding: 0;
}
.wrap{
height: 200px;
margin-top: 200px;
}
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: run 20s linear infinite;
}
/big div/
.cube div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform .2s ease-in;
}
.cube .front{
transform: translateZ(100px);
}
.cube .back{
transform:translateZ(-100px) rotateY(180deg) ;
}
.cube .left{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .right{
transform: rotateY(90deg) translateZ(100px);
}
.cube .top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom{
transform: rotateX(-90deg) translateZ(100px);
}
.img1{
width: 200px;
height: 200px;
}
.cube i{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.cube .i-front{
transform: translateZ(50px);
}
.cube .i-back{
transform:translateZ(-50px) rotateY(180deg) ;
}
.cube .i-left{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .i-right{
transform: rotateY(90deg) translateZ(50px);
}
.cube .i-top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .i-bottom{
transform: rotateX(-90deg) translateZ(50px);
}
i>img{
width: 100px;
height: 100px;
}
/hover div/
.cube:hover .front{
transform: translateZ(200px);
}
.cube:hover .back{
transform:translateZ(-200px) rotateY(180deg) ;
}
.cube:hover .left{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .right{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .bottom{
transform: rotateX(-90deg) translateZ(200px);
}
.img1:hover{
width: 200px;
height: 200px;
}
@keyframes run{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}

效果：