如何用css3制作一个旋转的立方体

最新推荐文章于 2025-03-05 11:48:21 发布

角落里的鸽子

最新推荐文章于 2025-03-05 11:48:21 发布

阅读量2.6k

点赞数 3

分类专栏：前端文章标签：前端 css3 动画立方体

本文链接：https://blog.csdn.net/wwegezi/article/details/83748475

版权

前端专栏收录该内容

4 篇文章

订阅专栏

css3增加的动画效果使得前端制作某些动画更加方便，流畅，如何制作一个最简单的会旋转的立方体呢？话不多说，直接上代码！

html代码如下，需要一个大的div包裹六个div作为立方体的六个表面

<body>
        <div class="box">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="three">3</div>
            <div class="four">4</div>
            <div class="five">5</div>
            <div class="six">6</div>
        </div>


    </body>

css3部分

 <style type="text/css">
        body{
            padding: 0;
            margin:0;
             perspective:800px;  

        }
        @keyframes rotate{
            0%{
                transform:rotateX(0deg) rotateY(0deg);
                }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
                }   
            }
            .box{
                margin:200px auto;
               width:300px;
                height:300px;
               position:relative;
                transform-style: preserve-3d; 
                 transform:rotateX(-45deg) rotateY(-45deg);
                 animation:rotate 5s infinite linear;
            }
            .box>div{
                width:100%;
                height:100%;
                text-align:center;
                line-height:300px;
                font-size:60px;
                font-weight:bold;
                color:#FFFFFF;  
                border:1px solid #FFFFFF;
                position:absolute;
                top:0;
                left:0;
               /*  transition:transform 5s ease-in; */
            }
            .one{
                transform:translateX(150px) rotateY(90deg);
                 background:red;
                 opacity:.5;
            }
            .two{
                transform:translateX(-150px) rotateY(-90deg);
                 background:green;
                 opacity:.5;
               }
            .three{
                 transform:translateZ(-150px);
                  background:yellow;
                 opacity:.5;
               }
           .four{
               transform:translateZ(150px);
               background:blue;
                 opacity:.5;
               }
           .five{
               transform:translateY(-150px) rotateX(90deg);
                background:purple;
                 opacity:.5;
               }
         .six{
               transform:translateY(150px) rotateX(-90deg);
                background:pink;
                 opacity:.5;
               } 
        </style>

初学前端小猿可能会碰到一些小问题，欢迎与我探讨。
最终效果
在这里插入图片描述