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

讷言丶

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

阅读量9.3k

点赞数 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>

讷言丶

关注

18
点赞
踩
148

收藏

觉得还不错? 一键收藏
打赏
30
评论
HTML + CSS实现图片3D旋转效果

**## 标题用CSS加上HTML做一个3D旋转木马**学了CSS的动画，仿照着自己做了一个3D旋转的小动画。先看看图片这里是截图的图片，看不出来动态效果，可以把CSS和HTML复制下来直接放在文本编辑器中进行图片路径的修改然后把格式转变成 .html 的就好了下面是代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ......
复制链接

扫一扫