三角形旋转自动播放

html布局

 <div class="box">
    <div class="cont">
        <div class="qian">
            <P>我</P>
            <P>是</P>
            <P第</P> <P>一</P>
                <P>面</P>
        </div>
        <div class="right">
            <P>我</P>
            <P>是</P>
            <P第</P> <P>二</P>
                <P>面</P>
        </div>
        <div class="left">
            <P>我</P>
            <P>是</P>
            <P第</P> <P>三</P>
                <P>面</P>
        </div>
    </div>
</div> 

css样式

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        width: 400px;
        height: 700px;
        background-color: black;
        position: relative;
        perspective: 800px;
        perspective-origin: 50% 200px;


    }

    .cont {
        position: relative;
        transform-origin: center center -57px;
        border: 1px solid black;
        width: 200px;
        height: 700px;
        margin: 0 auto;
        transform-style: preserve-3d;
        /* perspective: 800px; */  css实现旋转视野距离
        /* animation:move 2s linear infinite ; */ css实现旋转动画
    }

    .cont div {
        width: 200px;
        height: 600px;
        border: 1px solid red;
        position: absolute;
        top: 50px;
        opacity: 0.8;

    }

    .qian {
        background-color: aqua;
    }

    .left {
        transform-origin: top right;
        transform: translatex(-200px) rotatey(-120deg);
        background-color: red;
    }

    .right {
        transform-origin: top left;

        transform: translatex(200px) rotatey(120deg);
        background-color: blue;

    }

    p {
        color: white;
        font-size: 50px;
        text-align: center;
    }

    /* @keyframes move{
    0%{
   transform:rotatey(0deg);
    }
     50%{
        transform:rotatey(120deg);
    } 
 100%{
    transform:rotatey(120deg);
    }
} */

js实现旋转播放

<script>
    var cont = document.getElementsByClassName("cont")[0]

    var t = 0
    function star() {
     //旋转事件
        function run() {
            t = t + 10//每次执行在原有基础是再加10 实现旋转
            cont.style = 'transform:rotatey(' + t + 'deg);'
            //快速旋转几圈后在第二面是延迟几秒在继续进行旋转
            if (t == 840) {
                clearInterval(running)
                setTimeout(star, 2000)
            }
         //达到第二面
            else if (t == 1680) {
                clearInterval(running)
                setTimeout(star, 2000)
            }
           // 达到第三面时清除度数重新旋转
            else if (t == 2520) {
                clearInterval(running)
                t = 0;
                setTimeout(star, 2000)
            }
        }
        var running = setInterval(run, 1) 实现不停歇旋转事件
    }
    star();
</script>