动画 CSS 适用于除 safari 之外的所有浏览器

Question

我的动画在除 safari 之外的所有浏览器上都能正常运行。我已经使用vscode的autoprefix扩展自动添加css vendor，但是动画还是不能正常工作。

Screenshot of the error

codepen 演示：https://codepen.io/mnr39pro/pen/PoNJmEQ

代码 HTML：

.img-rs{
    height: auto; 
    max-width: 100%; 
}

.mystack{
  margin-top: 10rem;
    display: flex;
    flex-wrap: wrap ;
    justify-content: center;
    align-items: center;
}

.dbox{
    position: relative;
    width: 6rem;
    height: 6rem;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: animate3d 20s linear infinite;
    -webkit-animation: animate3d 20s linear infinite;
    
}

@-webkit-keyframes animate3d{
    0%{
        transform: perspective(62.5rem) rotateX(0deg) rotateY(35deg);
    }

    100%{
        transform: perspective(62.5rem) rotateX(360deg) rotateY(35deg);
    }
}

@keyframes animate3d{
    0%{
        transform: perspective(62.5rem) rotateX(0deg) rotateY(35deg);
    }

    100%{
        transform: perspective(62.5rem) rotateX(360deg) rotateY(35deg);
    }
}

.dbox span{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    -webkit-transform-origin: center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(calc(var(--i) * 51.5deg)) translateZ(6.5rem);
    -webkit-transform: rotateX(calc(var(--i) * 51.5deg)) translateZ(6.5rem);

}

.dbox span img{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
}

<div class="my-stack">
            <div class="mystack">
            <div class="dbox">
                <span style="--i:1;"><img class="img-rs" src="https://bestyphone.com/img/html5.png" alt="HTML5"></span>
                <span style="--i:2;"><img class="img-rs" src="https://bestyphone.com/img/css3.png" alt="CSS3"></span>
                <span style="--i:3;"><img class="img-rs" src="https://bestyphone.com/img/javascript.png" alt="Javascript"></span>
                <span style="--i:4;"><img class="img-rs" src="https://bestyphone.com/img/wordpress.png" alt="Wordpress"></span>
                <span style="--i:5;"><img class="img-rs" src="https://bestyphone.com/img/bootstrap.png" alt="Bootstrap"></span>
                <span style="--i:6;"><img class="img-rs" src="https://bestyphone.com/img/jquery.png" alt="jquery"></span>
                <span style="--i:7;"><img class="img-rs" src="https://bestyphone.com/img/python.png" alt="python"></span>
            </div>
        </div>
        </div>

请提供任何解决方案。

提前致谢

Answer 1

将浏览器支持添加到父 <div> mystack 类和 @-webkit-keyframes。

 .mystack{
      margin-top: 10rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap ;
            flex-wrap: wrap ;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

@-webkit-keyframes animate3d{
        0%{
            -webkit-transform: perspective(62.5rem) rotateX(0deg) rotateY(35deg);
                    transform: perspective(62.5rem) rotateX(0deg) rotateY(35deg);
        }
    
        100%{
            -webkit-transform: perspective(62.5rem) rotateX(360deg) rotateY(35deg);
                    transform: perspective(62.5rem) rotateX(360deg) rotateY(35deg);
        }
    }

Answer 2

通过从动画中删除“perspective(62.5rem)”解决了问题。