前端_运动的魔方

预览

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <title>Document</title>
</head>
<style>
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .box {
        width: 300px;
        height: 300px;
        margin: 150px auto;
        font-size: 30px;
        position: relative;
        transform-style: preserve-3d;
        animation: run 8s linear infinite alternate ;


    }
    .box div {
        width: 300px;
        height: 300px;
        position: absolute;
  
    }
    li {
        width: 90px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        margin: 5px;
        float: left;
        border-radius: 20%;
       

    }
       .front li {
            background-color: green;
        }
         .behind  li {
             background-color:chartreuse;
         }

         .top li {
              background-color: purple;
         }

         .bottom li {
              background-color: cornflowerblue;
         }

         .left li {
              background-color: darkorange;
         }

         .right li {
              background-color: #37ffc7;
         }
        .front {
             background:transparent;
             transform:  rotateX(-90deg) translateZ(150px);   }

       
       .behind {
            background:transparent;
             transform:  rotateX(90deg) translateZ(150px);
         } 
         .left {
            background:transparent;
             transform: rotateY(-90deg) translateZ(150px);
         }
         .right {
            background:transparent;
             transform:  rotateY(90deg) translateZ(150px)  ;
         }
         .top {
            background:transparent;
             transform: translateZ(-150px) ;
         }
         .bottom {
            background:transparent;
             transform: translateZ(150px) ;
         } 
         .box:hover {
             animation-play-state:paused
         }
         @keyframes run{
            0% {
                transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }

            20% {
                transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
            }

            40% {
                transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
            }

            60% {
                transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
            }

            80% {
                transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
            }

            100% {
                transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
            }
        
         }
    



</style>
<body>
    <div class="box">
        <div class="front">
            <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>7</li>
               <li>8</li>
               <li>9</li>
            </ul>
        </div>
        <div class="behind">
            <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>7</li>
               <li>8</li>
               <li>9</li>
            </ul>
        </div>
        <div class="left">
            <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>7</li>
               <li>8</li>
               <li>9</li>
            </ul>
        </div>
        <div class="right">
            <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>7</li>
               <li>8</li>
               <li>9</li>
            </ul>
        </div>
        <div class="top">
            <ul>
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>7</li>
               <li>8</li>
               <li>9</li>
            </ul>
        </div>
        <div class="bottom">
            <ul>
               <li>q</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
               <li>6</li>
               <li>7</li>
               <li>8</li>
               <li>9</li>
            </ul>
        </div>
    </div>
    
</body>
</html>
posted @ 2022-01-24 11:55  博客zhu虎康  阅读(31)  评论(1)  编辑  收藏  举报