代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*基本部署*/
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #ccc;
position: relative;
}
.imgBox {
width: 100%;
height: 100%;
}
.imgBox ul {
width: 100%;
height: 100%;
position: relative;
}
.imgBox li {
list-style: none;
width: 100px;
height: 100%;
float: left;
position: relative;
transform-style: preserve-3d;
transition: all 1s linear;
}
.imgBox li span {
display: block;
width: 100px;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
/*給每個 li 裏面的 span 添加對應的 圖片 以及 做 相關旋轉 */
.imgBox li span:nth-child(1) {
background: url("images/91953.jpg") no-repeat;
/*添加圖片*/
background-size: 500%;
/*圖片太大了 處理圖片*/
transform: translateZ(150px);
/*對應的 3d 變換*/
}
.imgBox li span:nth-child(2) {
background: url("images/91954.jpg") no-repeat;
background-size: 500%;
transform: rotateX(90deg) translateZ(150px);
}
.imgBox li span:nth-child(3) {
background: url("images/91960.jpg") no-repeat;
background-size: 500%;
transform: rotateX(180deg) translateZ(150px);
}
.imgBox li span:nth-child(4) {
background: url("images/91956.jpg") no-repeat;
background-size: 500%;
transform: rotateX(270deg) translateZ(150px);
}
/*調整背景圖片位置*/
.imgBox li:nth-child(1) span {
background-position: 0 bottom;
}
.imgBox li:nth-child(2) span {
background-position: -100px bottom;
}
.imgBox li:nth-child(3) span {
background-position: -200px bottom;
}
.imgBox li:nth-child(4) span {
background-position: -300px bottom;
}
.imgBox li:nth-child(5) span {
background-position: -400px bottom;
}
/*調整兩端按鈕*/
.box .left,
.box .right {
position: absolute;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, .2);
top: 50%;
margin-top: -25px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 20px;
line-height: 50px;
z-index: 100;
}
.box .left {
left: 0;
}
.box .right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="imgBox">
<ul>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
</div>
<a class="left" href="javascript:;"><</a>
<a class="right" href="javascript:;">></a>
</div>
<script src="jquery.min.js"></script>
<script>
$(function ($) {
var index = 0;
//儲存當前旋轉的次數
var flag = true;
// 節流閥
$('.left').on('click', function () {
if (!flag) return false;
flag = false;
index--;
var deg = index * 90;
$('.imgBox li').css('transform', 'rotateX(' + deg + 'deg)').each(function (i) {
$(this).css('transition-delay', i * 0.25 + 's');
// 設置延遲
});
});
$('.right').on('click', function () {
if (!flag) return false;
flag = false;
index++;
var deg = index * 90;
$('.imgBox li').css('transform', 'rotateX(' + deg + 'deg)').each(function (i) {
$(this).css('transition-delay', i * 0.25 + 's')
});
});
$('li:last').on('transitionend', function () {
flag = true;
// 釋放節流閥
});
});
</script>
</body>
</html>
效果圖：
