Gibt es eine Möglichkeit, ein div Spin, sowie seinen Inhalt zu machen, aber den Inhalt nicht auf den Kopf, während drehen drehen?
Was ich meine ist, dass die Div-Kinder der Rotation der Mutter-Div-Spinnerei folgen würden, aber in der gleichen Richtung bleiben (oben auf der Spitze, unten auf der Unterseite).Drehen Sie ein div, aber machen Sie seinen Inhalt nicht auf den Kopf gestellt
Mein Englisch ist nicht genug goog richtig zu artikulieren, was ich tun will, so ist hier ein exemple:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>Im exemple oben werden das Kind divs nach dem Rotation und der Spin.
Ich möchte sie nicht "auf den Kopf drehen" und nur der Rotation folgen.
Ich habe diese Art von Animation in mehreren Websites gesehen, aber ich weiß nicht genau wo genau.
Gibt es eine Möglichkeit, dies in css/js/jquery/php ... zu tun?
würden Sie haben die Kinder synchron mit dem Elternteil, in der entgegengesetzten Richtung zu drehen. z.B. Wenn die Eltern um 37 Grad im Uhrzeigersinn gegangen sind, sind die Kinder um 37 Grad gegen den Uhrzeigersinn gegangen und in der gleichen Orientierung wie vor dem Start der Eltern. –