旋转的盒子

最新推荐文章于 2026-08-22 23:26:40 发布

原创最新推荐文章于 2026-08-22 23:26:40 发布 · 374 阅读

本内容遵循CC 4.0 BY-SA版权协议

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           body{
               perspective: 1000px;
           }
           *{
               margin: 0;
               padding: 0;
           }
           .bigbox{
               position: relative;
               width: 800px;
               height: 800px;
               margin: 100px auto;
               transform-style: preserve-3d;
               animation: xz 1ms linear infinite;
           }
           @keyframes xz{
               0{
                   transform: rotate3d(0,0,0);
               }
               100%{
                   transform: rotate3d(1,1,0,360deg);
               }
           }
           .bigbox div{
               position: absolute;
               top: 0;
               left: 0;
               width: 300px;
               height: 300px;
               border: 1px solid red;
               text-align: center;
               line-height: 300px;
           }
           .bigbox .box1{
               transform: translateZ(150px);
           }
           .bigbox .box2{
               transform: translateZ(-150px);
           }
           .bigbox .box3{
               transform: translateX(-150px) rotateY(90deg);
           }
           .bigbox .box4{
               transform: translateX(150px) rotateY(90deg);
           }
           .bigbox .box5{
               transform: translateY(-150px) rotateX(90deg);
           }
           .bigbox .box6{
               transform: translateY(150px) rotateX(90deg);
           }
       </style>
   </head>
   <body>
       <div class="bigbox">
           <div class="box1">前</div>
           <div class="box2">后</div>
           <div class="box3">左</div>
           <div class="box4">右</div>
           <div class="box5">上</div>
           <div class="box6">下</div>
       </div>
   </body>
</html>

标签

#css3 #css #html