我的动画在野生动物园以外的所有浏览器上都能正常运行。我已经使用过vscode的自动前缀扩展来添加css供应商的autolty,但是动画仍然无法正常工作。
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>
任何安慰。
预先感谢
答案 0 :(得分:0)
将浏览器支持添加到父<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);
}
}
答案 1 :(得分:0)
通过从动画中删除“ perspective(62.5rem)”来解决问题。