css作业-立方体旋转

咦,发现两个新知识.

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

html

        

           

             
1
             
2
             
3
             
4
             
5
             
6
           
         

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);
       }
     }