cssジョブ-立方体回転

2330 ワード

あれ、新しい知識が二つ見つかりました.
  • 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);
           }
         }