动态立方体

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <style>
       .box {
           width: 250px;
           height: 250px;
           /*border: 1px dashed red;*/
           margin: 100px auto;
           position: relative;
           border-radius: 50%;

           /*让子盒子保持3D效果*/
           transform-style: preserve-3d;

           /*transform: rotateX(30deg) rotateY(-30deg);*/

           animation:gun 8s linear infinite ;
       }
       .box>div {
           width: 100%;
           height: 100%;
           position: absolute;
           text-align: center;
           line-height: 250px;
           font-size: 60px;
           color: #daa520;
       }
       .left{
           background-color:rgba(255,0,0,0.3);
           /*变换中心*/
           transform-origin: left;
           /*变换*/
           transform: rotateY(90deg) translateX(-125px);

       }
       .right{
           background: rgba(0,255,0,0.3);
           transform-origin: right;
           /*变换*/
           transform: rotatey(90deg) translateX(125px);
       }
       .forward{
           background: rgba(255,255,0,0.3);
           transform: translateZ(125px);
       }
       .back{
           background: rgba(0,255,255,0.3);
           transform: translateZ(-125px);
       }
       .up{
           background: rgba(255,0,255,0.3);
           transform: rotateX(90deg) translateZ(125px);
       }
       .down{
           background: rgba(11,0,22,0.3);
           transform: rotateX(-90deg) translateZ(125px);
       }
       @keyframes gun{
           from{transform: rotateX(0deg) rotateY(100%deg);}
           to{transform: rotateX(360deg) rotateY(360deg);}
       }
   </style>

   <body>
       <div class="box">
           <div class="up">上</div>
           <div class="down">下</div>
           <div class="left">左</div>
           <div class="right">右</div>
           <div class="forward">前</div>
           <div class="back">后</div>
       </div>
   </body>
</html>

本文是学习笔记，只用于学习交流

猜你喜欢