立体轮播图
- 代码+界面呈现
HTML
<div class="pox">
<ul class="box">
<li class="one"><img src="./img/img1.jpg" alt=""></li>
<li class="two"><img src="./img/img2.jpg" alt=""></li>
<li class="three"><img src="./img/img3.jpg" alt=""></li>
<li class="four"><img src="./img/img4.jpg" alt=""></li>
<li class="five"><img src="./img/img5.jpg" alt=""></li>
<li class="six"><img src="./img/img6.jpg" alt=""></li>
</ul>
</div>
CSS
body,
html,
div,
ul,
li {
margin: 0;
padding: 0;
}
.pox{
position: relative;
perspective: 1600px;
border: 1px solid #000;
margin: 0 auto;
width: 300px;
height: 300px;
}
.box {
height: 300px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
width: 300px;
transition: 2s;
}
.box>li {
width: 300px;
height: 300px;
list-style: none;
text-align: center;
line-height: 300px;
font-size: 30px;
position: absolute;
}
.box>li>img {
width: 300px;
height: 300px;
}
.one {
background: rgba(255, 0, 5, 0.3);
transform: translateZ(150px);
}
.two {
background: rgba(220, 104, 44, 0.3);
transform: rotateY(90deg) translateZ(150px);
}
.three {
background: rgba(255, 239, 0, 0.3);
transform: translateZ(-150px) rotate(180deg);
}
.four {
background: rgba(86, 255, 0, 0.3);
transform: rotateY(-90deg) translateZ(150px);
}
.five {
background: rgba(0, 76, 255, 0.3);
transform: rotateX(90deg) translateZ(150px);
}
.six {
background: rgba(168, 0, 255, 0.3);
transform: rotateX(-90deg) translateZ(150px);
}
效果:如下图的一个正方体
调整为轮播图需要添加JS部分:效果每间隔3s中会轮播一次,为什么是3s因为正方体每次旋转的时间用去了2s
function scroll() {
var time = 90;
var num = 0;
setInterval(function () {
num++
$('.box').css({ "transform": "rotateY(" + time*num + "deg)" })
}, 5000)
}
scroll()
知识点:
- 布局:
1.外层标签.pox:第一个div(.pox)使用了perspective:1600px
属性来实现景深
,同时设置一个基准平面作为参照——观察者距离距离z=0平面的距离,如果正方体的面都是透明的,那么会有可透视的效果,如果z>0,元素看起来会比正常要偏大,反之则偏小
2.外层标签.box:第二个div(.box)保留3d效果,transform-style: preserve-3d
3.内层的6个li标签则分别是正方体的6个面,主要通过旋转和位移调整
- 关于translate()
需要注意的是该属性的X,Y,Z轴始终是针对元素当前的位置来说的
,什么意思?例如:对于正对观察者的元素,垂直屏幕的轴就是Z轴,但是如果该元素围绕Y轴旋转了90deg之后,那么相对于该元素来讲,Z轴就变成平行屏幕的方向了。这点掌握了,就可以轻松写立体图形了