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

学了CSS的动画,仿照着自己做了一个3D旋转的小动画。先看看图片HTML + CSS实现图片3D旋转效果_第1张图片
这里是截图的图片,看不出来动态效果,可以把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>
    
    
body>

html>

你可能感兴趣的:(CSS,html,css,css3,html5)