旋转立方体实现

最新推荐文章于 2024-10-15 13:31:06 发布

R234567891

最新推荐文章于 2024-10-15 13:31:06 发布

阅读量136

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/R234567891/article/details/121361009

版权

CSS3 3D动画旋转立方体关键帧动画 transform

关键词由CSDN通过智能技术生成

1.效果

2.代码实现

<html>
    <head>
        <title>旋转立方体</title>
        <style>
             roll{
                from{
                    transform: rotateX(0) rotateY(0) rotateZ(0);
                }
                to{
                    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
                }
            }
            *{
                margin:0;
                padding:0;
                background-color: skyblue;
            }
            div{
                width:200px;
                height:200px;
                background-color: skyblue;
                line-height:200px;
                text-align:center;
                color:rgb(26, 13, 13);
                font-size:100px;
                position:absolute;
            }
            .wrap{
                padding:100px;
                background-color: transparent;
                transform-style: preserve-3d;/*开启3D效果*/
                animation: roll 8s linear infinite;/*3D效果默认关闭\infinite无限次执行、linear匀速*/
            }
            .wrap div:nth-of-type(1){
                transform: rotateY(-90deg) translateZ(100px);
                background-image: url(r/1.jpg);
            }
            .wrap div:nth-of-type(2){
                transform: rotateY(90deg) translateZ(100px);
                background-image: url(r/2.jpg);
            }
            .wrap div:nth-of-type(3){
                transform: rotateX(90deg) translateZ(100px);
                background-image: url(r/3.jpg);
            }
            .wrap div:nth-of-type(4){
                transform: rotateX(-90deg) translateZ(100px);
                background-image: url(r/4.jpg);
            }
            .wrap div:nth-of-type(5){
                transform: translateZ(100px);
                background-image: url(r/5.jpg);
            }
            .wrap div:nth-of-type(6){
                transform: rotateX(180deg) translateZ(100px);
                background-image: url(r/6.jpg);
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <!--左右-->
            <div></div>
            <div></div>
            <!--上下-->
            <div></div>
            <div></div>
            <!--前后-->
            <div></div>
            <div> </div>
        </div>
    </body>
</html>