CSS Gestufte Rotation auf allen Achsen

Question

Ich möchte eine schrittweise Rotation:

1. 180 Grad um die Z-Achse;
2. 180 Grad um die Y-Achse; und
3. 180 Grad um die X-Achse.

So habe ich die CSS geschrieben:

@keyframes rotate { 
    25% { transform: rotateZ(180deg); } 
    50% { transform: rotateY(180deg); } 
    75% { transform: rotateX(180deg); } 
} 
.content { 
    animation-name: rotate; 
    animation-duration: 9s; 
} 

Allerdings kann ich nicht, es zu verwalten scheinen. Die erste Drehung (Z) funktioniert, aber 2. sieht so aus, als würde sie sich um die X-Achse und nicht um die Y-Achse drehen. Und die 3. Rotation, nun, das ist einfach komisch.

Kann mir bitte jemand erklären, was ich falsch mache und wie ich es beheben kann?

Answer 1

Versuchen Sie das? Sie sollten andere Rotationen bis zum Ende halten.

@keyframes rotate { 
 
    33% { transform: rotateZ(180deg); } 
 
    66% { transform: rotateZ(180deg) rotateY(180deg); } 
 
    100% { transform: rotateZ(180deg) rotateY(180deg) rotateX(180deg); } 
 
} 
 
.content { 
 
    animation-name: rotate; 
 
    animation-duration: 9s; 
 
    width: 45px; 
 
    height: 45px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
.content div{ 
 
    position: absolute; 
 
} 
 
.content div:nth-child(1){ 
 
    width: 45px; 
 
    height: 10px; 
 
    background-color: green; 
 
    top: 0; 
 
} 
 
.content div:nth-child(2){ 
 
    width: 10px; 
 
    height: 45px; 
 
    background-color: blue; 
 
    left: 0; 
 
} 
 
.content div:nth-child(3){ 
 
    width: 45px; 
 
    height: 10px; 
 
    background-color: yellow; 
 
    bottom:0; 
 
} 
 

 
.content div:nth-child(4){ 
 
    width: 10px; 
 
    height: 35px; 
 
    background-color: orange; 
 
    right:0; 
 
    bottom: 0; 
 
}

<div class="content"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>