3D旋转相册

最新推荐文章于 2024-07-24 17:16:26 发布

陈y_d

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量130

点赞数

文章标签： html html5 css css3

本文链接：https://blog.csdn.net/Cwd_wade/article/details/107784503

版权

代码如下

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

<head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <style>
        .box {
            width: 200px;
            height: 200px;
            top: 250px;
            margin: 100px auto;
            position: relative;
            left: 50%;
            margin-left: -100px;
            transform-style: preserve-3d;
            /* transform: rotateY(-30deg) rotateX(57deg); */
            animation: rotate1 10s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes rotate1 {
            from {
                transform: rotateY(0) rotateX(0);
            }

            to {
                transform: rotateY(360deg) rotateX(360deg);
                transition: all 0.6s;
            }
        }

        .box>div {
            width: 200px;
            height: 200px;
            opacity: .8;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;

        }

        .up {
            background-color: red;
            background-image: url("img/1.jpg");
            transform: rotateX(90deg) translateZ(100px);
            animation: move_up 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes move_up {
            0% {
                transform: rotateX(90deg) translateZ(100px);
                width: 200px;
                height: 200px;
            }

            50% {
                transform: rotateX(90deg) translateZ(300px);
                width: 400px;
                height: 400px;
            }

            100% {
                transform: rotateX(90deg) translateZ(100px);
                width: 200px;
                height: 200px;
            }
        }


        .down {
            background-color: blue;
            background-image: url("img/2.jpg");
            transform: rotateX(90deg) translateZ(-100px);
            animation: move_down 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes move_down {
            0% {
                width: 200px;
                height: 200px;
                transform: rotateX(90deg) translateZ(-100px);
            }

            50% {
                width: 400px;
                height: 400px;
                transform: rotateX(90deg) translateZ(-300px);
            }

            100% {
                width: 200px;
                height: 200px;
                transform: rotateX(90deg) translateZ(-100px);
            }
        }


        .left {
            background-color: rgb(157, 255, 0);
            background-image: url("img/3.jpg");
            transform: rotateY(90deg) translateZ(100px);
            animation: move_left 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes move_left {
            0% {
                width: 200px;
                height: 200px;
                transform: rotateY(90deg) translateZ(100px);
            }

            50% {
                width: 400px;
                height: 400px;
                transform: rotateY(90deg) translateZ(300px);
            }

            100% {
                width: 200px;
                height: 200px;
                transform: rotateY(90deg) translateZ(100px);
            }
        }

        .right {
            background-color: rgb(80, 247, 211);
            background-image: url("img/4.jpg");
            transform: rotateY(90deg) translateZ(-100px);
            animation: move_right 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes move_right {
            0% {
                width: 200px;
                height: 200px;
                transform: rotateY(90deg) translateZ(-100px);
            }

            50% {
                width: 400px;
                height: 400px;
                transform: rotateY(90deg) translateZ(-300px);
            }

            100% {
                width: 200px;
                height: 200px;
                transform: rotateY(90deg) translateZ(-100px);
            }
        }

        .front {
            background-color: rgb(162, 0, 255);
            background-image: url("img/5.jpg");
            transform: translateZ(100px);
            animation: move_front 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes move_front {
            0% {
                width: 200px;
                height: 200px;
                transform: translateZ(100px);
            }

            50% {
                transform: translateZ(300px);
                height: 400px;
                width: 400px;
            }

            100% {
                width: 200px;
                height: 200px;
                transform: translateZ(100px);
            }
        }

        .back {
            background-color: rgb(255, 115, 0);
            background-image: url("img/6.jpg");
            transform: translateZ(-100px);
            animation: move_back 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes move_back {
            0% {
                width: 200px;
                height: 200px;
                transform: translateZ(-100px);
            }

            50% {
                width: 400px;
                height: 400px;
                transform: translateZ(-300px);
            }

            100% {
                width: 200px;
                height: 200px;
                transform: translateZ(-100px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="up"></div>
        <div class="down"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="front"></div>
        <div class="back"></div>
    </div>
</body>

</html>

陈y_d

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D旋转相册

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /&
复制链接

扫一扫