您的位置：首页 > Web前端 > CSS

Css3 3D 平面螺旋轮播

2017-09-19 11:29 253 查看 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>8.2 3D 螺旋轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
.slider{
width: 600px;
height: 300px;
/*border: 1px red solid;*/
margin: 150px auto;
position: relative;
}
/*.slider-outer{*/
/*-webkit-transform-style: preserve-3d;*/
/*-moz-transform-style: preserve-3d;*/
/*-ms-transform-style: preserve-3d;*/
/*transform-style: preserve-3d;*/
/*transform: rotateY(30deg) rotateX(30deg);*/
/*}*/
.slider-outer,.slider-items , .img{
height: 100%;
width: 100%;
position: absolute;
}
.slider-items{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: 2s;
width: 100px;
}
.img:nth-child(1){
background-image: url("images/1-1.jpg");
transform: rotateX(0deg) translateZ(150px);
}
.img:nth-child(2){
background-image: url("images/1-2.jpg");
transform: rotateX(90deg) translateZ(150px);
}
.img:nth-child(3){
background-image: url("images/1-3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.img:nth-child(4){
background-image: url("images/1-4.jpg");
transform: rotateX(270deg) translateZ(150px);
}
.btns{
width: 100%;
height: 50px;
position: absolute;
top:calc(50% - 25px);
font-size: 2em;
color: #ffffff;
text-align: center;
line-height: 50px;
}
.prev,.next{
background-color: rgba(0,0,0,.3);
height: 50px;
width: 50px;
position: absolute;
}
.prev{
left: 0;
}
.next{
right: 0;
}

</style>
</head>
<body>
<div class="slider">
<div class="slider-outer">
<div class="slider-items">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="slider-items">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="slider-items">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="slider-items">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="slider-items">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
<div class="slider-items">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
<div class="btns">
<div class="prev" id="prev"><</div>
<div class="next" id="next">></div>
</div>
</div>
<script>
var items=document.getElementsByClassName("slider-items"),num=0;
for(var i=0;i<items.length;i++){
var item= items[i];
var widthItem=item.offsetWidth;
item.style['left']=i*widthItem+'px';
item.style['transitionDelay']=i*.3+'s';
var child=item.children;
for(var j=0;j<child.length;j++){
var img=child[j];
img.style['backgroundPosition']=-widthItem*i+'px'
}
}
document.getElementById("prev").addEventListener("click",function(e){
var rotate=++num*90;
for(var i=0;i<items.length;i++) {
items[i].style['transform'] = 'rotateX(' + rotate + 'deg)'
}
});
document.getElementById("next").addEventListener("click",function(e){
var rotate=--num*90;
for(var i=0;i<items.length;i++) {
items[i].style['transform'] = 'rotateX(' + rotate + 'deg)'
}
});

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航