Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background:#000;
	overflow:hidden;
}
#perspective {
	width:780px;
	height:500px;
	margin:auto;
	overflow:hidden;
	perspective:650px;
	position:relative;
}
#wrap {
	width:150px;
	height:180px;
	margin:0 auto;
	position:relative;
	transform-style:preserve-3d;
	transform:rotateX(0deg) rotateY(0deg) translateZ(300px);
	margin-top:264px;
}
#wrap .img_con {
	width:100%;
	height:100%;
	position:absolute;
	border-radius:1px;
	transform:rotateY(0deg) translateZ(500px);
	-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
	cursor:pointer;
}
#wrap .img_con span {
	display:inline-block;
	top:0px;
	color:white;
	z-index:100;
	position:absolute;
	top:0px;
	transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
#wrap .img_con img {
	width:100%;
	height:100%;
	transform:rotateY(180deg);
}
#wrap p {
	width:1200px;
	height:1200px;
	background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
	border-radius:100%;
	position:absolute;
	left:50%;
	top:102%;
	margin-left:-600px;
	margin-top:-600px;
	transform:rotateX(90deg);
}
.btn-up {
	position:absolute;
	top:-100px;
	right:100px;
	font-size:12px;
}
.btn-last {
	position:absolute;
	top:-100px;
	right:-20px;
	font-size:12px;
}

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

3D旋转轮播图(原创)

0