}
.box .right{
right: 0;
}
.images-box{
width: 100%;
height: 100%;
list-style: none;
}
.images-box li {
width: 120px;
height: 100%;
float: left;
position: relative;
/*使被转换的子元素保留其 3D 转换*/
transform-style: preserve-3d;
transition:all 6s; /*控制旋转时间*/
}
.images-box li span{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("images/1.jpg")no-repeat ;
}
/*拼接立体容器，每个面使用不同的背景图*/
.box .images-box li span:nth-child(1){
background-image: url("images/1.jpg");
transform: translateZ(150px);
}
.box .images-box li span:nth-child(2){
background-image: url("images/2.jpg");
transform: rotateX(90deg) translateZ(150px);
}
.box .images-box li span:nth-child(3){
background-image: url("images/3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.box .images-box li span:nth-child(4){
background-image: url("images/4.jpg");
transform: rotateX(270deg) translateZ(150px);
}
/*拼接背景图*/
.images-box li:nth-child(1) span{
background-position: 0 0;
}
.images-box li:nth-child(2) span{
background-position: -120px 0;
}
.images-box li:nth-child(3) span{
background-position: -240px 0;
}
.images-box li:nth-child(4) span{
background-position: -360px 0;
}
.images-box li:nth-child(5) span{
background-position: -480px 0;
}
3.这是js代码，这里用到jquery，需提前引入
$(function () {
var index=0; //旋转角度记录
var flag=true;
$('.left').on('click',function () {
if(!flag) return false;
flag=false;
index--;
var angle=-index*90;
$('.images-box li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
// 每个模块延时不同，即可看出切换3d效果
$(this).css('transition-delay',i*0.25+'s');
});
});
$('.right').on('click',function () {
if(!flag) return false;
flag=false;
index++;
var angle=-index*90;
$('.images-box li').css('transform','rotateX('+angle+'deg)').each(function (i,item) { $(this).css('transition-delay',i*0.25+'s');
});
});
//节流阀,防止连续、快速、多次点击
$('li:last').on('transitionend',function () {
flag=true;
});
})
</script>
