前言

有些小伙伴0基础小伙伴担心，我没有编程工具怎么办？
这个不需要编程工具的，只需要找9张图片改改名称就行

步骤

(1) 新建一个文件夹

(2) 文件夹中新建img文件夹以及一个txt文档

(3) 把我放在下面的代码粘贴到txt文档中

（4）没有txt后缀的这样设置一下（这里以win11为例，点击查看-->显示-->文件扩展名）

（5）把文本文档名称改为旋转木马.html

（6）把图片放在img文件夹里面，需要9张

（7）图片重命名为 1.jpg 2.jpg 3.jpg 以此规律命名（200 x 300 像素的图片）

（8）设置图片像素（用win自带照片软件打开-->点击... --> 重设大小-->自定义尺寸-->把宽度改成200、高度改成200-->保存）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 300px;
            /* border: 1px solid black; */
            margin: 50px auto;
            position: relative;
            /* 设置3D 效果 */
            transform-style: preserve-3d;
            /* 添加3D视距  透视效果 */
            /* perspective: 300px; */
            transform: rotateX(-15deg);
            /* CSS animation动画属性 
                name 定义动画名称
                duration 定义动画执行时间   秒/单位
                timing-function 定义动画执行速度 linear 匀速
                delay 定义动画执行等待 秒/单位
                iteration-count 定义动画执行次数 默认为1  无限执行 infinite
                animation-play-state 动画运行状态控制 默认running运行  paused 暂停
            */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: move 10s linear infinite;
        }
        /* 定义关键帧动画  执行我们定义的动画 */
        @keyframes move{
            0%{
                /* 在CSS3 变幻属性中  如果要给一个元素添加多个变幻属性
                    需要将所有的变幻属性都写在transform
                 */
                transform:rotateX(-15deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(-15deg) rotateY(360deg);
            }
        }
        /* :hover 伪类选择器  设置用户鼠标移入时的效果 */
        .box:hover{
            /* 当用户鼠标移入时 动画由默认的运行状态变成暂停 */
            animation-play-state: paused;
        }
        .box div{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
            margin-top: 50px;
        }
        /* :nth-child(1) */
        .box div:nth-child(1){
            /* 改变页面第一张图片 变幻属性
            transform  变幻属性
            rotate  旋转
            translate 位移
             */
            transform: rotateY(40deg) translateZ(275px);
        }
        .box div:nth-child(2){
            transform: rotateY(80deg) translateZ(275px);
        }
        .box div:nth-child(3){
            transform: rotateY(120deg) translateZ(275px);
        }
        .box div:nth-child(4){
            transform: rotateY(160deg) translateZ(275px);
        }
        .box div:nth-child(5){
            transform: rotateY(200deg) translateZ(275px);
        }
        .box div:nth-child(6){
            transform: rotateY(240deg) translateZ(275px);
        }
        .box div:nth-child(7){
            transform: rotateY(280deg) translateZ(275px);
        }
        .box div:nth-child(8){
            transform: rotateY(320deg) translateZ(275px);
        }
        .box div:nth-child(9){
            transform: rotateY(360deg) translateZ(275px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="./img/1.jpg" alt="">
        </div>
        <div>
            <img src="./img/2.jpg" alt="">
        </div>
        <div>
            <img src="./img/3.jpg" alt="">
        </div>
        <div>
            <img src="./img/4.jpg" alt="">
        </div>
        <div>
            <img src="./img/5.jpg" alt="">
        </div>
        <div>
            <img src="./img/6.jpg" alt="">
        </div>
        <div>
            <img src="./img/7.jpg" alt="">
        </div>
        <div>
            <img src="./img/8.jpg" alt="">
        </div>
        <div>
            <img src="./img/9.jpg" alt="">
        </div>
    </div>
</body>
</html>

上一篇：ABB机器人Sockets通讯

四时宝库

程序员的知识宝库

HTML旋转木马(0基础，1分钟学会)（“旋转木马”）

前言

步骤

代码