基于HTML的旋转立方体的实现

最新推荐文章于 2024-08-04 21:23:42 发布

weixin_46525300

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量240

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_46525300/article/details/121369715

版权

（1）、

<html>
    <head>
        <title>旋转立方体</title>
        <style>
            @keyframes roll{
                from{
                    transform: rotateX(0) rotateY(0) rotateZ(0);
                }
                to{
                    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
                }
            }
            *{
                margin:0;
                padding:0;
            }
            div{
                width:200px;
                height:200px;
                background-color: skyblue;
                line-height:200px;
                text-align:center;
                color:white;
                font-size:100px;
                position:absolute;
            }
            .wrap{
                padding:100px;
                background-color: transparent;
                transform-style: preserve-3d;
                animation: roll 8s linear infinite;
            }
            .wrap div:nth-of-type(1){
                transform: rotateY(-90deg) translateZ(100px);
                background-image: url(1.jpg);
            }
            .wrap div:nth-of-type(2){
                transform: rotateY(90deg) translateZ(100px);
                background-image: url(1.jpg);
            }
            .wrap div:nth-of-type(3){
                transform: rotateX(90deg) translateZ(100px);
                background-image: url(1.jpg);
            }
            .wrap div:nth-of-type(4){
                transform: rotateX(-90deg) translateZ(100px);
                background-image: url(1.jpg);
            }
            .wrap div:nth-of-type(5){
                transform: translateZ(100px);
                background-image: url(1.jpg);
            }
            .wrap div:nth-of-type(6){
                transform: rotateX(180deg) translateZ(100px);
                background-image: url(1.jpg);
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <!--左右-->
            <div></div>
            <div></div>
            <!--上下-->
            <div></div>
            <div></div>
            <!--前后-->
            <div></div>
            <div> </div>
        </div>
    </body>
<html>

（2）、

weixin_46525300

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于HTML的旋转立方体的实现

（1）、<html> <head> <title>旋转立方体</title> <style> @keyframes roll{ from{ transform: rotateX(0) rotateY(0) rotateZ(0); } to{
复制链接

扫一扫