实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.box {
width:560px;
height:380px;
border: 1px solid #000;
margin: 100px auto;
/*perspective:1000px;*/
position: relative;
}
ul{
/*transform: rotateX(45deg);*/
position:relative;
width: 20%;
height:100%;
float:left;
transform-style:preserve-3d;
transition: all 1s;
}
ul li {
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
ul:nth-child(2) li {
background-position-x:-112px;
}
ul:nth-child(3) li {
background-position-x:-224px;
}
ul:nth-child(4) li {
background-position-x:-336px;
}
ul:nth-child(5) li {
background-position-x:-448px;
}
ul li:nth-child(1){
transform: translateZ(190px);
background-image: url("images/1.jpg");
}
ul li:nth-child(2){
transform:rotateX(90deg) translateZ(190px);
background-image: url("images/2.jpg");
}
ul li:nth-child(3){
transform:rotateX(180deg) translateZ(190px);
background-image: url("images/3.jpg");
}
ul li:nth-child(4){
transform:rotateX(270deg) translateZ(190px);
background-image: url("images/4.jpg");
}
.arrow-left,
.arrow-right {
position:absolute;
width:100px;
height:100px;
background-color:#FFA500;
top:50%;
transform: translateY(-50%);
line-height: 100px;
text-align: center;
text-decoration: none;
color: white;
cursor: pointer;
border-radius:10px;
}
.arrow-left{
left:-100px;
}
.arrow-right{
right:-100px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="arrow-left">上一页</a>
<a href="javascript:;" class="arrow-right">下一页</a>
</div>
<script>
var arrowLeft = document.querySelector(".arrow-left");
var arrowRight = document.querySelector(".arrow-right");
var uls = document.querySelectorAll("ul");
var index = 0;
var flag = true;
arrowLeft.addEventListener("click",function(){
if(flag){
flag = false;
index++;
for(var i = 0; i< uls.length; i++){
uls[i].style.transition = "all 1s" + (0.2 * i) + "s";
uls[i].style.transform = "rotateX("+(index * 90)+"deg)";
}
}
});
arrowRight.addEventListener("click",function(){
if(flag){
flag = false;
index--;
for(var i = 0; i< uls.length; i++){
uls[i].style.transition = "all 1s" + (0.2 * i) + "s";
uls[i].style.transform = "rotateX("+(index * 90)+"deg)";
}
}
});
uls[uls.length-1].addEventListener("transitionend",function(){
flag = true;
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
