首页 > 代码库 > 3d轮播图的效果实现

3d轮播图的效果实现

  最近工程比较松,所以自己研究了一下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="http://www.mamicode.com/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";







技术分享

 

3d轮播图的效果实现