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

2401_86400300

于 2024-09-05 13:59:44 发布

阅读量526

点赞数 4

文章标签： html css 3d

本文链接：https://blog.csdn.net/2401_86400300/article/details/141929288

版权

													**## 标题     用CSS加上HTML做一个3D旋转木马**




学了CSS的动画，仿照着自己做了一个3D旋转的小动画。先看看图片![](https://img-blog.csdnimg.cn/20210528154527864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTAzMzQ2MQ==,size_16,color_FFFFFF,t_70#pic_center)  

这里是截图的图片，看不出来动态效果，可以把CSS和HTML复制下来直接放在文本编辑器中进行图片路径的修改  

然后把格式转变成 .html 的就好了



视频演示链接：  

_https://www.ixigua.com/6954580295748157987_



下面是代码：

<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;

        

    }