美文网首页
css作业-立方体旋转

css作业-立方体旋转

作者: wudimingwo | 来源:发表于2018-11-15 13:50 被阅读0次

    咦,发现两个新知识.

    1. perspective 隔代也会有影响. 所以可以放在爷爷身上.能解决旋转容器时, perspective-origin 跟着转.
      2.scss确实厉害, 本来css是无法用一些数学函数的. 但scss有啊!这个还是挺方便的.

    html

            <div class="wrapper">
               <div class="content">
                 <div class="item">1</div>
                 <div class="item">2</div>
                 <div class="item">3</div>
                 <div class="item">4</div>
                 <div class="item">5</div>
                 <div class="item">6</div>
               </div>
             </div>
    

    scss

    .wrapper{
        width: 400px;
        height: 400px;
        margin: 100px auto;
        border: 1px solid black;
        display: flex;
        perspective: 300px;
        .content {
            transform-style: preserve-3d;
            width: 100px;
            height: 100px;
            position: relative;
            margin: auto;
            animation: move 5s ease infinite;
            div{
                width: 100%;
                height: 100%;
                border: 1px solid #F08080;
                border-radius: 20px;
                position: absolute;
                left: 0;
                top: 0;
                text-align: center;
                line-height: 100px;
                font-size: 40px;
                font-weight: bold;
                opacity: 0.5;
            }
        
            @for $i from 1 through 6 {
                @if ($i <= 4) {
                    div:nth-of-type(#{$i}) {
                        transform: rotateY(#{($i - 1) * 90}deg) translateZ(50px);
                        background-color: rgb(floor(random()*255),floor(random()*255),floor(random()*255));  
                        
                    }
                }
            }
            div:nth-of-type(5) {
                   transform: rotateX(90deg) translateZ(50px);
                   background-color: #F08080;
            }
            div:nth-of-type(6) {
                   transform: rotateX(-90deg) translateZ(50px);
                   background-color: #F0AD4E;
            }
        }
        
    }
    @keyframes move{
           0% {
               transform:  rotate(0deg) rotateX(0deg) rotateY(0deg);
           }
           25%{
               transform:  rotate(360deg) rotateX(0deg) rotateY(0deg);
               
           }
           50%{
               transform:  rotate(360deg) rotateX(360deg) rotateY(0deg);
               
           }
           100% {
               transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
           }
         }
    

    相关文章

      网友评论

          本文标题:css作业-立方体旋转

          本文链接:https://www.haomeiwen.com/subject/ivkyfqtx.html