Html
    Css
    Js

    
                        
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);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS3+html 3D旋转相册

0