3d轮播图的效果实现

Posted 2020-08-24

　　最近工程比较松，所以自己研究了一下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";