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="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";