CSS实现旋转木马

Idpd.Boy

已于 2022-12-29 21:55:26 修改

阅读量343

点赞数

文章标签： css css3 html

于 2022-12-29 21:53:24 首次发布

本文链接：https://blog.csdn.net/Idpd_/article/details/128488482

版权

这篇博客介绍如何利用CSS3实现旋转木马的视觉效果。通过创建一个包含多个小盒子的大盒子，设置盒子的相对和绝对定位，以及利用3D变换进行旋转和动画效果，可以达到旋转木马的动态展示。关键在于调整小盒子的旋转角度和Z轴运动，以及为body设置透视距离来营造立体感。

摘要由CSDN通过智能技术生成

实现旋转木马的思路

创建一个大盒子，里面放若干个小盒子
为小盒子设置绝对定位，大盒子设置相对定位
第一张沿着Z轴运动，后续小盒子沿着Y轴递增旋转60度，并且都再顺着Z轴运动
为body设置perspective值，定义 3D 元素距视图的距离
最后一步写动画，让大盒子section沿着Y轴进行旋转

<head>
    <style>
        body {
            perspective: 800px;
        }
 
        section {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 200px;
            transform-style: preserve-3d;
            /* 让section旋转 */
            animation: action 10s linear infinite;
            background: url('pic/horse.png') no-repeat;
        }

        /* 设置动画 */
        @keyframes action {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        /* 给每个div插入图片 */
        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('pic/dog.png') no-repeat;
            background-size: cover;
        }

        /* 先旋转再移动 */
        section div:nth-child(1) {
            transform: rotateY(0) translateZ(300px);
        }

        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }

        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }

        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>