最近工程比较松,所以自己研究了一下3d轮播图的实现原理,其实说白了也不是很难就是在x,y,z轴上的平移和整个平面的旋转变换达到的效果,
下面是实现代码
html部分
<div class="stage">
<div class="contains">
<div style="transform: rotateY(0deg) translateZ(400px);">关于我</div>
<div style="transform: rotateY(60deg) translateZ(400px)">Javascript、jq实现轮播图、下拉菜单等</div>
<div style="transform: rotateY(120deg) translateZ(400px)">bootstrap实现快速布局</div>
<div style="transform: rotateY(180deg) translateZ(400px)">php,ajax同异步</div>
<div style="transform: rotateY(240deg) translateZ(400px)">angular实现api获取</div>
<div style="transform: rotateY(300deg) translateZ(400px)"><a href="small_game.html">一些小游戏</a></div>
</div>
</div>
css部分
.stage{
perspective: 2000px;
/*background:;*/
}
.contains{
margin: 200px 500px;
/*width: 400px;*/
/*设置 contains 的高度 会影响消失点的位置,从而影响观测点的位置*/
height: 200px;
/**/
/*开启3D效果*/
transform-style: preserve-3d;
/*transform: rotateX(-10deg);*/
/*执行动画*/
animation: rotate3D 48s infinite;
}
.contains div{
/**/
width: 200px;;text-align: center;line-height: 40px;font-size: 20px;
}
.contains div a {
color: lightblue;
font-weight: 700;
}
@keyframes rotate3D {
/*0 60 120 180 240 300 360*/
0%{transform: rotateY(0deg)}
16.7%{transform: rotateY(-60deg)}
24%{transform: rotateY(-60deg)}
33.3%{transform: rotateY(-120deg)}
42%{transform: rotateY(-120deg)}
50%{transform: rotateY(-180deg)}
58%{transform: rotateY(-180deg)}
66.7%{transform: rotateY(-240deg)}
74%{transform: rotateY(-240deg)}
83.3%{transform: rotateY(-300deg)}
92%{transform: rotateY(-300deg)}
100%{transform: rotateY(-360deg)}
}
@charset "UTF-8";