【案例简介】

css3实现动态摩天轮旋转效果demo

【案例截图】

【核心代码】

  @keyframes left-top {
        from {
            transform: translate(-50%, -50%) rotateZ(-45deg) translateY(-150px) translateY(50%) rotateZ(45deg) rotateZ(0);
        }
        to {
            transform: translate(-50%, -50%) rotateZ(-45deg) translateY(-150px) translateY(50%) rotateZ(45deg) rotateZ(-360deg);
        }
    }

    @keyframes left-bottom {
        from {
            transform: translate(-50%, -50%) rotateZ(-135deg) translateY(-150px) translateY(50%) rotateZ(135deg) rotateZ(0);
        }
        to {
            transform: translate(-50%, -50%) rotateZ(-135deg) translateY(-150px) translateY(50%) rotateZ(135deg) rotateZ(-360deg);
        }
    }

    @keyframes right-top {
        from {
            transform: translate(-50%, -50%) rotateZ(45deg) translateY(-150px) translateY(50%) rotateZ(-45deg) rotateZ(0);
        }
        to {
            transform: translate(-50%, -50%) rotateZ(45deg) translateY(-150px) translateY(50%) rotateZ(-45deg) rotateZ(-360deg);
        }
    }

    @keyframes right-bottom {
        from {
            transform: translate(-50%, -50%) rotateZ(135deg) translateY(-150px) translateY(50%) rotateZ(-135deg) rotateZ(0);
        }
        to {
            transform: translate(-50%, -50%) rotateZ(135deg) translateY(-150px) translateY(50%) rotateZ(-135deg) rotateZ(-360deg);
        }
    }
</style>
<div class="container">
    <div class="top box">top</div>
    <div class="left box">left</div>
    <div class="right box">right</div>
    <div class="bottom box">bottom</div>
    <div class="left-top other-box">left-top</div>
    <div class="left-bottom other-box">left-bottom</div>
    <div class="right-top other-box">right-top</div>
    <div class="right-bottom other-box">right-bottom</div>
</div>