HTML + CSS实现图片3D旋转效果

讷言丶

已于 2022-07-07 15:03:55 修改

阅读量9.8k

点赞数 18

分类专栏： CSS 文章标签： html css css3 html5

于 2021-05-28 15:56:33 首次发布

本文链接：https://blog.csdn.net/weixin_51033461/article/details/117362935

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学了CSS的动画，仿照着自己做了一个3D旋转的小动画。先看看图片
这里是截图的图片，看不出来动态效果，可以把CSS和HTML复制下来直接放在文本编辑器中进行图片路径的修改
然后把格式转变成 .html 的就好了

视频演示链接：https://www.ixigua.com/6954580295748157987

下面是代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转</title>
    <link rel="icon" href="./image/logo.png">
    <style>
        body {

            perspective: 1500px;
        }

        section {
            position: relative;
            width: 261px;
            height: 450px;
            margin: 100px auto;
            transform-style: preserve-3d;

            /* animation: name duration timing-function delay iteration-count direction fill-mode;   */
            animation: rotate 8s linear infinite;
            /* 图片路径 */
            background: url(image/dl.png)no-repeat;
            /* opacity: 0.9; */
        }


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

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

        section div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            /* background: url(image/xw.png)no-repeat; */
            opacity: 0.7;
        }

        section div:nth-child(2n) {
            /* 这里是外层的旋转图片路径 */
            background: url(image/xw.png)no-repeat;
        }

        section div:nth-child(2n+1) {
            /* 这里是外层旋转的图片路径 */
            background: url(image/ts.png)no-repeat;
        }

        section div:nth-child(1) {
            /* 在z轴上移动200px */
            transform: translateZ(300px);

        }

        section div:nth-child(2) {
            /* 在y轴上旋转60度，然后在z轴上移动300像素，下面类似 */
            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);

        }
        audio{
            border: none;
            
        }
    </style>
</head>

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

    </section>
    <!-- 这里是音频链接，不用理会 -->
    <!-- <audio src="./image/Nothing's Gonna Change My Love For You - Westlife.flac" controls loop></audio> -->
</body>

</html>