Html
    Css
    Js

    
                        
 .carousel {
	position:relative;
	padding:20px;
	-webkit-perspective:500px;
	perspective:500px;
	overflow:hidden;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
}
.carousel > * {
	-webkit-box-flex:0;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
}
.carousel figure {
	margin:0;
	width:60%;
	height:100%;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition:-webkit-transform 0.5s;
	transition:-webkit-transform 0.5s;
	transition:transform 0.5s;
	transition:transform 0.5s,-webkit-transform 0.5s;
}
.carousel figure img {
	display:inline-block;
	width:100%;
	height:100%;
	box-sizing:border-box;
	padding:0 0px;
	cursor:pointer;
	background-size:100% 100%;
}
.carousel figure img:not(:first-of-type) {
	position:absolute;
	left:0;
	top:0;
}
.nav {
	position:absolute;
	width:44px;
	height:44px;
	background:#ddd;
	top:calc(50% - 22px);
	cursor:pointer;
}
div.next {
	right:0px;
	background-position:right top;
}
div.prev {
	left:0px;
}

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

3d轮播图

0