css实现动画

ゝ一世哀愁。 2023-06-12 04:12 24阅读 0赞

body {
        
                  /* 
                perspective 透视
                没有透视，就看不到3d效果
                 */
                perspective: 1200px;
            }

如果没有设置 perspective 属性 那么就看不见3d效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]

.square {
        
    
                position: relative;
                width: 200px;
                margin: 300px auto;
                /* 建立3D空间 */
                transform-style: preserve-3d;
                animation: squareRo 3s linear infinite;
            }
    
            .box {
        
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                /* 透明度 */
                opacity: 0.5;
            }
    
            .red {
        
                /* 前 */
                background-color: red;
                transform: translate3d(0, 0, 100px);
                /* animation: squareRo 3s linear infinite; */
            }
    
            .yellow {
        
                /* 上 */
                background-color: yellow;
                transform: rotateX(90deg) translate3d(0, 0, 100px);
            }
    
            .blue {
        
                /* 左 */
                background-color: blue;
                transform: rotateY(90deg) translate3d(0, 0, -100px);
    
            }
    
            .pink {
        
                /* 下 */
                background-color: pink;
                transform: rotateX(-90deg) translate3d(0, 0, 100px);
            }
    
            .green {
        
                /* 右 */
                background-color: green;
                transform: rotateY(-90deg) translate3d(0, 0, -100px);
            }
    
            .orange {
        
                /* 后 */
                background-color: orange;
                transform: translate3d(0, 0, -100px);
    
            }
    
            @keyframes squareRo {
        
                form {
        
                    /* transform-origin: 50% 50% 100px; */
                    transform: rotateX(0) rotateY(0) rotateZ(0)
                }
    
                to {
        
                    /* transform-origin: 50% 50% 100px; */
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)
                }
            }

<div class="square">
            <div class="box red">00001</div>
            <div class="box yellow">00002</div>
            <div class="box pink">00003</div>
            <div class="box green">00004</div>
            <div class="box blue">00005</div>
            <div class="box orange">00006</div>
        </div>
        ~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]: /images/20230531/4669518ae86e49ca8e0b8992960076f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]: /images/20230531/f4412d0866b64e2dbace93ce2721bbc1.png