I'm facing an issue with my animation that works fine on all browsers except Safari. I've tried using the autoprefix extension in VSCode to automatically add CSS vendor prefixes, but the animation still isn't functioning correctly.
Here's a screenshot of the error
You can view the demo on CodePen: https://codepen.io/mnr39pro/pen/PoNJmEQ
HTML code:
.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>If anyone has a solution, please share.
Thank you in advance