css旋转木马代码示例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*透视*/
        body {
            perspective: 1000px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 300px auto;
            /*子元素保持3D效果*/
            transform-style: preserve-3d;
            animation: rotate 20s linear infinite;
        }

        /*.box:hover {*/
        /*    animation-play-state: paused;*/

        /*}*/

        @keyframes rotate {
            0% {
            }
            100% {
                transform: rotateY(360deg);
            }
        }

        [class*="horse"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .horse1 {
            background: url("./images/horse1.jpg") no-repeat;
            background-size: 100%;
            /*把正面的图像拉近一点，越靠近 眼睛*/
            transform: translateZ(500px);
        }

        .horse2 {
            background: url("./images/horse2.jpg") no-repeat;
            background-size: 100%;
            /*先转动，再移动*/
            transform: rotateY(60deg) translateZ(500px);
        }

        .horse3 {
            background: url("./images/horse3.jpg") no-repeat;
            background-size: 100%;
            transform: rotateY(120deg) translateZ(500px);
        }

        .horse4 {
            background: url("./images/horse4.jpg") no-repeat;
            background-size: 100%;
            transform: rotateY(180deg) translateZ(500px);
        }

        .horse5 {
            background: url("./images/horse5.jpg") no-repeat;
            background-size: 100%;
            transform: rotateY(240deg) translateZ(500px);
        }

        .horse6 {
            background: url("./images/horse6.jpg") no-repeat;
            background-size: 100%;
            transform: rotateY(300deg) translateZ(500px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="horse1"></div>
        <div class="horse2"></div>
        <div class="horse3"></div>
        <div class="horse4"></div>
        <div class="horse5"></div>
        <div class="horse6"></div>
    </div>
    
    <script>
        const horses = document.querySelectorAll('[class*=horse]')
        for (let i = 0; i < horses.length; i++) {
            horses[i].addEventListener('mouseenter', function () {
                this.style.transform = 'scale(3)'

            })
        }
        for (let i = 0; i < horses.length; i++) {
            horses[i].addEventListener('mouseleave', function () {
                // 鼠标离开后，还原成1倍，并且旋转角度、移动的位置都要还原
                //element.style.transform +=相当于给transform追加值
                this.style.transform = 'scale(1) '
                this.style.transform += `rotateY(${i * 60}deg)`
                this.style.transform += 'translateZ(500px)'


            })
        }
    </script>
</body>
</html>