<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
width: 560px;
height: 380px;
list-style: none;
border: 1px solid gray;
display: flex;
position: relative;
list-style: none;
padding: 0;
margin: 100px auto;
}
li{
height: 100%;
position: relative;
width: 50%;
transform-style: preserve-3d;
transition: all 1s;
}
ul>a {
font-size: 40px;
color: white;
width: 50px;
height: 50px;
background-color: gray;
text-align: center;
line-height: 50px;
text-decoration: none;
font-weight: 900;
position: absolute;
transform: translateY(-25px);
}
li>div{
width: 100%;
height: 100%;
position: absolute;
}
ul .left{
left: -50px;
top: 50%;
transform: translateY(-25px);
}
ul .right{
right: -50px;
top: 50%;
transform: translateY(-25px);
}
.first{
background: url('imgs/01.jpg') no-repeat;
transform: rotateX(0deg) translateZ(190px);
}
.second{
background: url('imgs/02.jpg') no-repeat;
transform: rotateX(-90deg) translateZ(190px);
}
.third{
background: url('imgs/03.jpg') no-repeat;
transform: rotateX(-180deg) translateZ(190px);
}
.four{
background: url('imgs/04.jpg') no-repeat;
transform: rotateX(-270deg) translateZ(190px);
}
/* 设置 第二个区域的li标签内部 div backgroun的偏移值 */
li:nth-child(2){
transition: all 1s .1s;
}
li:nth-child(2)>div{
background-position: -280px 0;
}
</style>
<script src="js/jquery-3.0.0.min.js"></script>
<script>
var clickCount = 0;
$(function () {
$(".left").click(function () {
clickCount--;
$("li").css({transform:'rotateX('+clickCount*90+'deg)'
})
})
$(".right").click(function () {
clickCount++;
$("li").css({transform:'rotateX('+clickCount*90+'deg)'
})
})
})
</script>
</head>
<body>
<ul class="container">
<li>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="four"></div>
</li>
<li>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="four"></div>
</li>
<a href="javascript:void(0)" class="left"><</a>
<a href="javascript:void(0)" class="right">></a>
</ul>
</body>
</html>
