css 3d旋转图片（css旋转木马）（详细教程）

最新推荐文章于 2025-05-06 14:21:01 发布

矢量克罗斯

最新推荐文章于 2025-05-06 14:21:01 发布

阅读量2.6k

点赞数 3

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_44016181/article/details/128705622

版权

前端专栏收录该内容

2 篇文章

订阅专栏

该文章详细介绍了如何利用HTML和CSS3创建一个3D旋转的图片展示效果，通过设置html骨架、css样式以及关键帧动画，实现了多个图片在旋转中呈现的视觉效果。文章包括了从初始布局到添加动画和交互的完整步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

成品展示

接下来开始制作旋转老婆图片

一、准备html骨架和基本的css

先准备好html骨架(后面为了挨个测试可以先把后面5个div注释掉)

<div class="bigbox">
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w1.jpg" alt=""></div>
</div>

预定义好css样式

/* 初始化所有的盒子间距为0,比较常用 */
* {
    padding: 0;
    margin: 0;
}
/* 设置大盒子的大小 */
.bigbox {
    /*相对位置属性*/
    position: relative;
    width: 300px;
    height: 200px;
    margin: 100px auto;
}
/* 设置所有小盒子的大小及绝对定位（公用的属性） */
.bigbox>div {
    /*绝对位置属性*/
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
/* 设置图片的大小 */
img {
    width: 100%;
    height: 100%;
}

效果图（所有的div叠加在了一起）：

二、开始修饰动画旋转效果

为body设置深景（相当于一个镜头，距离屏幕的距离）

 body {
            /* 设置景深 */
            perspective: 500px;
        }

为大盒子和设置旋转旋转中心+子元素3d属性：

transform-origin: 150px 0 -300px;
transform-style: preserve-3d;

为大盒子添加过渡样式，使盒子变换位置时变得顺滑+易于观察。

 transition: all 5s;

设置鼠标经过样式，用于测试：

.bigbox:hover {
    transform: rotateY(360deg); 
        }

为了测试方便，这里再加一个盒子便于观察：

/* 选择器选出的第二个盒子 */
.bigbox>div:nth-child(2) {
            /* 因为有旋转轴的存在，子盒子只需要调整角度就可以换位置啦~ */
            transform: rotateY(180deg);
        }

进行第一次测试：旋转正面向屏幕的盒子

可以看到，效果非常滴成功~（好耶~）

把剩下的所有盒子加上试试：

        .bigbox>div:nth-child(3) {
            transform: rotateY(120deg);
        }

        .bigbox>div:nth-child(4) {
            transform: rotateY(300deg);
        }

        .bigbox>div:nth-child(5) {
            transform: rotateY(60deg);
        }

        .bigbox>div:nth-child(6) {
            transform: rotateY(240deg);
        }

这个时候，就该改下鼠标经过属性啦~

.bigbox:hover {
            /* transform: rotateY(360deg); */
            /* 设置经过即停模式 */
            animation-play-state: paused;
        }

在给大盒子加上动画属性：

 animation: word 5s infinite linear;

接下来，咱写个动画让它自己转：(注意！上面的“word”对应下面的动画名！)

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

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

看下最终效果吧~

最后，再把（老婆）图片放上去，就大功告成啦~

三、最终代码展示

下面是完整代码，整个文件要以".html"文件结尾再打开哦~！

<!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>旋转编制</title>
</head>

<body>
    <style>
        /* 初始化所有的盒子间距为0,比较常用 */
        * {
            padding: 0;
            margin: 0;
        }

        body {
            /* 设置景深 */
            perspective: 500px;
        }

        /* 设置大盒子的大小 */
        .bigbox {
            width: 300px;
            height: 200px;
            margin: 100px auto;


            /* 设置相对定位 */
            position: relative;
            /* 设置旋转中心 */
            transform-origin: 150px 0 -300px;
            /* 设置过渡样式 */
            transition: all 5s;
            /* 设置子元素具备3d属性 */
            transform-style: preserve-3d;
            /* 添加动画 */
            animation: word 5s infinite linear;
        }


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

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


        /* 设置鼠标经过样式 */
        .bigbox:hover {
            /* transform: rotateY(360deg); */
            /* 设置经过即停模式 */
            animation-play-state: paused;
        }

        /* 设置小盒子的大小及绝对定位 */
        .bigbox>div {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;

            /* 设置旋转中心 */
            transform-origin: 150px 0 -300px;
        }

        /* 设置剩下图片的位置 */
        .bigbox>div:nth-child(2) {
            transform: rotateY(180deg);
        }

        .bigbox>div:nth-child(3) {
            transform: rotateY(120deg);
        }

        .bigbox>div:nth-child(4) {
            transform: rotateY(300deg);
        }

        .bigbox>div:nth-child(5) {
            transform: rotateY(60deg);
        }

        .bigbox>div:nth-child(6) {
            transform: rotateY(240deg);
        }


        /* 设置图片的大小 */
        img {
            width: 100%;
            height: 100%;
        }
    </style>
    <div class="bigbox">
        <!-- img/w1.jpg是图片位置哦！ -->
        <div><img src="img/w1.jpg" alt=""></div>
        <div><img src="img/w2.jpg" alt=""></div>
        <div><img src="img/w4.jpg" alt=""></div>
        <div><img src="img/w5.jpg" alt=""></div>
        <div><img src="img/w6.jpg" alt=""></div>
        <div><img src="img/w7.jpg" alt=""></div>
    </div>
</body>

</html>

（测位标靶是静止不动的，便于参照观察，不是网页的属性哦~）