【css】动画：立方体相册-Toy模板网

这篇具有很好参考价值的文章主要介绍了【css】动画：立方体相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【css】动画：立方体相册文章来源地址https://www.toymoban.com/news/detail-507028.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 400px;
            height: 400px;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 3s  linear infinite;
        }
        .box > div{
            opacity: .8;
            position: absolute;
        }
        img{
            width: 400px;
            height: 400px;
        }
        .box1{
            transform: rotateY(90deg) translateZ(200px);
        }
        .box2{
            transform: rotateY(-90deg) translateZ(200px);
        }
        .box3{
            transform: rotateX(90deg) translateZ(200px);
        }
        .box4{
            transform: rotateX(-90deg) translateZ(200px);
        }
        .box5{
            transform: rotateX(0deg) translateZ(-200px);
        }
        .box6{
            transform:translateZ(200px) rotateY(180deg) ;
        }  
        @keyframes rotate{
            from{
                transform: rotateX(0) rotateZ(0);
            }
            to{
                /* turn表示转一圈 */
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <img src="https://img2.baidu.com/it/u=5127007,3812041565&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
        </div>

        <div class="box2">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F1a26c771-efae-4ad6-b0b6-b65ae4ba9a4d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690381031&t=9e7f312124dec799268934fcf251b54b" alt="">
        </div>

         <div class="box3">
            <img src="https://img2.baidu.com/it/u=154011915,3804345797&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
        </div>

        <div class="box4">
            <img src="https://img2.baidu.com/it/u=2564921989,1524882583&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
        </div>

        <div class="box5">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F4b040e1f-41f5-496a-8639-1cddc8c9d773%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690381123&t=c492c5a1d1b7fcb79b2d586b4fd0500a" alt="">
        </div>

        <div class="box6">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F11a139e1-513d-4dde-b3bc-5b1e96fcc54d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690381124&t=c9b41e74380026f56d551094298ebcad" alt="">
        </div>  
    </div>
</body>
</html>

到了这里，关于【css】动画：立方体相册的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！