html写3D旋转相册的原理,CSS3+html 3D旋转相册

body {

background:#06081B;

perspective:5000px;

}

.show {

perspective:5000px;

-webkit-transform:rotateX(-45deg);

-moz-transform:rotateX(-45deg);

transform:rotateX(-45deg);

transform-style:preserve-3d;

}

.box {

position:relative;

width:150px;

height:250px;

border:1px solid red;

margin:300px auto;

transform-style:preserve-3d;

-webkit-animation:rotate1 10s linear infinite;

-moz-animation:rotate1 10s linear infinite;

animation:rotate1 10s linear infinite;

}

.box img {

width:150px;

height:250px;

border:1px solid #ccc;

position:absolute;

left:0;

top:0;

-webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));

}

.img1 {

-webkit-transform:translateZ(300px);

-moz-transform:translateZ(300px);

transform:translateZ(300px);

}

.img2 {

-webkit-transform:rotateY(36deg) translateZ(300px);

-moz-transform:rotateY(36deg) translateZ(300px);

transform:rotateY(36deg) translateZ(300px);

}

.img3 {

-webkit-transform:rotateY(72deg) translateZ(300px);

-moz-transform:rotateY(72deg)g) translateZ(300px);

transform:rotateY(72deg) (300px);

}

.img4 {

-webkit-transform:rotateY(108deg) translateZ(300px);

-moz-transform:rotateY(108deg) translateZ(300px);

transform:rotateY(108deg) translateZ(300px);

}

.img5 {

-webkit-transform:rotateY(144deg) translateZ(300px);

-moz-transform:rotateY(144deg) translateZ(300px);

transform:rotateY(144deg) translateZ(300px);

}

.img6 {

-webkit-transform:rotateY(180deg) translateZ(300px);

-moz-transform:rotateY(180deg) translateZ(300px);

transform:rotateY(180deg) translateZ(300px);

}

.img7 {

-webkit-transform:rotateY(216deg) translateZ(300px);

-moz-transform:rotateY(216deg) translateZ(300px);

transform:rotateY(216deg) translateZ(300px);

}

.img8 {

-webkit-transform:rotateY(252deg) translateZ(300px);

-moz-transform:rotateY(252deg) translateZ(300px);

transform:rotateY(252deg) translateZ(300px);

}

.img9 {

-webkit-transform:rotateY(288deg) translateZ(300px);

-moz-transform:rotateY(288deg) translateZ(300px);

transform:rotateY(288deg) translateZ(300px);

}

.img10 {

-webkit-transform:rotateY(324deg) translateZ(300px);

-moz-transform:rotateY(324deg) translateZ(300px);

transform:rotateY(324deg) translateZ(300px);

}

@-moz-keyframes rotate1 {

0% {

-webkit-transform:rotateY(0deg);

-moz-transform:rotateY(0deg);

transform:rotateY(0deg);

}

100% {

-webkit-transform:rotateY(360deg);

-moz-transform:rotateY(360deg);

transform:rotateY(360deg);

}

}@-webkit-keyframes rotate1 {

0% {

-webkit-transform:rotateY(0deg);

-moz-transform:rotateY(0deg);

transform:rotateY(0deg);

}

100% {

-webkit-transform:rotateY(360deg);

-moz-transform:rotateY(360deg);

transform:rotateY(360deg);

}

}