Hi there! I've been using @webkit in CSS to create animations for some shapes, and I'm trying to make them rotate fully back to their original positions around a center point. I attempted to rotate the shapes around the z-axis but encountered an issue. The script I wrote seems to work, but it results in the first shape moving to its starting position (all shapes end up transforming to different positions before returning to their original place) and then replaying the animation in a loop with only the starting position visible. How can I modify the script so that the shapes rotate fully?
#catogories-1 {
width: 133px;
position:fixed;
left: 50%;
right: 50%;
top: 45%;
z-index: 6;
-webkit-animation: catogories-1 1.5s linear infinite;
}
#catogories-2 {
width: 133px;
position:fixed;
left: 55%;
right: 45%;
top: 37%;
z-index: 4;
-webkit-animation: catogories-2 1.5s linear infinite;
}
#catogories-3 {
width: 133px;
position:fixed;
left: 45%;
right: 55%;
top: 34%;
z-index: 3;
-webkit-animation: catogories-3 1.5s linear infinite;
}
#catogories-4 {
width: 133px;
position:fixed;
left: 35%;
right: 65%;
top: 37%;
z-index: 4;
-webkit-animation: catogories-4 1.5s linear infinite...
<div class="catogories">
<div id="catogories-1">
<img src="images/Rectangle-...