Html
                  Css
                  Js
                
                
                
                * {
                	margin:0;
                	padding:0;
                }
                .view {
                	width:560px;
                	height:300px;
                	margin:200px auto;
                	position:relative;
                }
                .box {
                	width:100%;
                	height:100%;
                	list-style:none;
                	background-color:black;
                	position:absolute;
                	/* 開啟3d效果 */
                            transform-style:preserve-3d;
                }
                .box li {
                	width:25%;
                	height:100%;
                	position:relative;
                	float:left;
                	/* li元素的子元素span需要3d顯示 */
                            transform-style:preserve-3d;
                	transition:all .5s;
                }
                .box li span {
                	width:100%;
                	height:100%;
                	position:absolute;
                }
                /* 每一個li標簽的第一個span都有同一個圖片的背景 */
                        .box li span:nth-of-type(1) {
                	background:url('http://www.xunoa.icu/img/cs/500x300-1.png');
                	transform:translateZ(-150px) rotateX(180deg);
                }
                /* 每一個li標簽的第2個span都有同一個圖片的背景 */
                        .box li span:nth-of-type(2) {
                	background:url('http://www.xunoa.icu/img/cs/500x300-2.png');
                	transform:translateY(-150px)  rotateX(90deg);
                }
                /* 每一個li標簽的第3個span都有同一個圖片的背景 */
                        .box li span:nth-of-type(3) {
                	background:url('http://www.xunoa.icu/img/cs/500x300-3.png');
                	transform:translateY(150px) rotateX(-90deg);
                }
                /* 每一個li標簽的第4個span都有同一個圖片的背景 */
                        .box li span:nth-of-type(4) {
                	background:url('http://www.xunoa.icu/img/cs/500x300-4.png');
                	transform:translateZ(150px);
                }
                /* 通過背景圖像位移,達到4個span構成一個完整圖片背景 */
                        .box li:nth-of-type(2) span {
                	background-position-x:-100%;
                }
                .box li:nth-of-type(3) span {
                	background-position-x:-200%;
                }
                .box li:nth-of-type(4) span {
                	background-position-x:-300%;
                }
                .view a {
                	width:60px;
                	height:60px;
                	line-height:60px;
                	text-align:center;
                	text-decoration:none;
                	position:absolute;
                	background-color:black;
                	font-size:60px;
                	opacity:.5;
                	color:#fff;
                	top:50%;
                	margin-top:-30px;
                	display:none;
                }
                .view .pre {
                	left:0;
                }
                .view .next {
                	right:0;
                }
                
                
                
                ↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.11.1
                 立即下載

                CSS3切割輪播圖

                自己修改圖片路徑就可以獲得想要的輪播圖效果

                0
                  短信接口
                快3倍投资金计划