css案例--旋转木马-CSDN博客

本文链接：https://blog.csdn.net/forever_zc/article/details/128390172

这篇博客介绍了如何使用CSS创建一个3D旋转木马效果。内容包括设置大盒子和小盒子的布局，给图片设定宽度，为每个小盒子在3D轴上定位并旋转，通过关键帧动画实现旋转效果，并应用`transform-style`和`perspective`属性增强视觉体验。

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

代码逻辑：

1.我们要有一个大盒子装着十个小盒子

2.10个小盒子中装着图片

3.通过动画animate实现旋转效果

1.架构如下

2.我们给每张图片加个同样的宽度

就随便加个200px吧

img{

width：200px；

}

3.我们给这个大盒子定位

然后给每个小盒子固定在同一位置

4.因为我们做的是一个3D效果，我们需要给每个小盒子在3D轴上移动距离

然后每个盒子都需要旋转

因我们这次做的效果是10张图片旋转，所有我们需要给第一张图片旋转36度，第二张以后都在上一张的基础上加上36deg

样式如下：

5.最后该加上3D效果，给大盒子加上

transform-style: preserve-3d;

animation: myrotate 10s linear infinite;

然后用给动画名加上效果

从0度开始到360度

@keyframes myrotate {

from {

transform: rotateY(0);

}

to {

transform: rotateY(360deg);

}

效果如下

效果好看一点用到perspective方法

就是在哪个角度去看

效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }

        body {
            perspective: 1000px;
        }

        .box {
            position: relative;
            width: 100px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: myrotate 10s linear infinite;
        }

        @keyframes myrotate {
            from {
                transform: rotateY(0);
            }

            to {
                transform: rotateY(360deg);
            }
        }

        .item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 200px;
        }

        .item01 {
            transform: translateZ(500px);
        }

        .item02 {
            transform: rotateY(36deg) translateZ(500px);
        }

        .item03 {
            transform: rotateY(72deg) translateZ(500px);
        }

        .item04 {
            transform: rotateY(108deg) translateZ(500px);
        }

        .item05 {
            transform: rotateY(144deg) translateZ(500px);
        }

        .item06 {
            transform: rotateY(180deg) translateZ(500px);
        }

        .item07 {
            transform: rotateY(216deg) translateZ(500px);
        }

        .item08 {
            transform: rotateY(252deg) translateZ(500px);
        }

        .item09 {
            transform: rotateY(288deg) translateZ(500px);
        }

        .item10 {
            transform: rotateY(324deg) translateZ(500px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item item01">
            <img src="images/axin.jpeg" alt="">
        </div>
        <div class="item item02">
            <img src="images/bailu.jpeg" alt="">
        </div>
        <div class="item item03">
            <img src="images/jxx.jpeg" alt="">
        </div>
        <div class="item item04">
            <img src="images/wxyi.jpeg" alt="">
        </div>
        <div class="item item05">
            <img src="images/wyibo.jpeg" alt="">
        </div>
        <div class="item item06">
            <img src="images/zjtian.jpeg" alt="">
        </div>
        <div class="item item07">
            <img src="images/wyibo.jpeg" alt="">
        </div>
        <div class="item item08">
            <img src="images/wyibo.jpeg" alt="">
        </div>
        <div class="item item09">
            <img src="images/wyibo.jpeg" alt="">
        </div>
        <div class="item item10">
            <img src="images/wyibo.jpeg" alt="">
        </div>
    </div>
</body>

</html>