Demo: 3D-Album
Reprinted on: https://blog.csdn.net/u014346301/article/details/53447712
Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D相册</title>
    <style>
        .container{
            width:800px;
            height: 400px;
            margin:0 auto;
            perspective: 1000px;
        }
        .box{
            position: relative;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-animation:animate 12s linear infinite;
            -o-animation:animate 12s linear infinite;
            animation:animate 12s linear infinite;
        }
        .img{
            position: absolute;
            width:300px;
            height: 200px;
            background: #8959a8;
            top: 100px;
            left:250px;
            box-shadow: inset 0 0 5px #bbbbbb;
        }
        .img1{
            background: url("../img/1.webp") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(0deg) translateZ(300px);
        }
        .img2{
            background: url("../img/2.webp") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(60deg) translateZ(300px);
        }
        .img3{
            background: url("../img/3.webp") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(120deg) translateZ(300px);
        }
        .img4{
            background: url("../img/4.webp") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(180deg) translateZ(300px);
        }
        .img5{
            background: url("../img/5.webp") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(240deg) translateZ(300px);
        }
        .img6{
            background: url("../img/6.webp") no-repeat;
            -webkit-background-size:cover;
            background-size:cover;
            transform: rotateY(300deg) translateZ(300px);
        }
        @keyframes animate {
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box" id="box">
        <div class="img img1"></div>
        <div class="img img2"></div>
        <div class="img img3"></div>
        <div class="img img4"></div>
        <div class="img img5"></div>
        <div class="img img6"></div>
    </div>
</div>
</body>
</html>
赏