前端_运动的魔方

2022-01-24 12:04:25 阅读：136 来源： 互联网

标签：魔方前端 transform li rotateX rotateY background 运动 150px

预览

源码

<!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>

标签：魔方,前端,transform,li,rotateX,rotateY,background,运动,150px
来源： https://www.cnblogs.com/zhuhukang/p/15838831.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端_运动的魔方

预览

源码