css3转换（banner）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.con{
width: 400px;
height: 220px;
margin: 100px auto;
/*border: 1px solid #eee;*/
/*perspective: 2000px;*/
}
ul{
list-style: none;
height: 100%;
width: 400px;
position: relative;
transform-style: preserve-3d;
/*transform: rotateX(45deg) rotateY(45deg);*/
transition: all 3s;
}
ul>li{
position: absolute;
height: 220px;
width: 80px;
transform-style: preserve-3d;
}
ul>li>div{
height: 100%;
width: 100%;
position: absolute;
}
ul>li>div:nth-child(1){
transform: translateZ(40px);
background: url("img/1.jpg") no-repeat;
background-size: cover;
}
ul>li>div:nth-child(2){
transform: translateX(40px) rotateY(90deg);
background: url("img/2.jpg") no-repeat;
background-size: cover;
}
ul>li>div:nth-child(3){
transform: translateZ(-40px) rotateY(180deg);
background: url("img/3.jpg") no-repeat;
background-size: cover;
}
ul>li>div:nth-child(4){
transform: translateX(-40px) rotateY(270deg);
background: url("img/4.jpg") no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="con">
<ul id="ban">
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
<button id="btn">下一张</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#ban li").each(function(k,v){
$(this).css({
left:k*80+"px",
transitionDelay:0.2*k+"s"
});
$(this).find("div").css({
backgroundPositionX:-80*k+"px"
})
})
var num=0;
$("#btn").click(function(){
num++;
$("#ban li").css("transform","rotateY("+num*(90)+"deg)")
})
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.11.14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读