Hi beautiful people!
I tried to implement such an animation → Floema Jewelry (hero section), but when I rotate each of the images, and then the X-Y animation does not allow me to spin the images. Any thoughts on how to implement something like such a simple animation?
I would be grateful for any advice friends! Thanks :3
<style>
@keyframes drawArc {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
@-webkit-keyframes drawArc {
0% { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg) ;}
100%{ -webkit-transform: rotate(-180deg) translateX(150px) rotate(180deg); }
}
body{
padding: 150px;
background: black;
}
.test {
animation: drawArc 3s linear infinite;
-webkit-animation: drawArc 3s linear infinite;
}
</style>
I managed to twist one element in an arc, but a few do not work, they begin to move in chaos