Ich würde gerne wissen, ob es möglich ist, div entlang der Kreisbahn mit festem Winkel zu bewegen. Z.B. Bewegen div nur 45 Grad Kreisbahn und dann machen es zurück zum Ausgangspunkt, ähnlich wie Pendel.Bewegt div entlang der Kreisbahn mit festem Winkel
Hoffe, dieses Bild wird Sinn machen, was ich meinte.
Vielen Dank für alle Hilfe. Wir freuen uns,
Wie pro Ihre Anforderung aktualisiert (dass das Objekt selbst sollte immer senkrecht stehen während der Rotation), habe ich meinen vorherigen Code geändert.
Es mag einen anderen Ansatz geben, aber ich denke nur im Moment daran. Hier habe ich unser ursprüngliches "Ball" -Element in ein anderes Div eingepackt. Jetzt macht das äußere Div die normale Pendelanimation. Zusätzlich dazu führt das innere Objekt auch eine gegenläufige Animation durch, die es während der Animation an allen Punkten vertikal gerade hält.
Bitte beachten Sie, dass das innere Objekt seinen Transformationsursprung hat, der center center ist, da er nur um seine eigene Achse rotieren muss.
#container
{
background-color: #777;
border-radius: 50%;
height: 20px;
margin: 0 auto;
margin-top: 150px;
position: relative;
width: 20px;
}
#ball
{
animation: swing 1s ease 0s infinite;
background-color: green;
height: 50px;
left: -15px;
position: absolute;
top: -150px;
transform-origin: center 150px;
width: 50px;
}
@keyframes swing{
0%{transform: rotate(-22.5deg);}
50%{transform: rotate(22.5deg);}
100%{transform: rotate(-22.5deg);}
}
#main-content
{
animation: innerswing 1s ease 0s infinite;
background-color: red;
display: block;
height: 100%;
width: 100%;
}
@keyframes innerswing{
0%{transform: rotate(22.5deg);}
50%{transform: rotate(-22.5deg);}
100%{transform: rotate(22.5deg);}
}<div id="container">
<div id="ball">
<div id="main-content"></div>
</div>
</div>Vielen Dank für Ihre Lösung @Mohit, es scheint in meinem Fall zu funktionieren. Würden Sie gerne ein bisschen mehr darüber machen, wie ** X ** für '{transform: rotieren (X Grad);}' berechnet werden soll, wenn ich das Objekt für 10 Grad auf einer kreisförmigen Bahn von Winkel 125 zu Winkel 135 bewegen muss ? –
@ o.O Zählen Sie Winkel im oder gegen den Uhrzeigersinn? Eine schnelle Lösung besteht darin, den Unterschied zwischen den beiden Winkeln als den gewünschten Rotationswert beizubehalten (in Ihrem Fall 10 Grad) und ihn dann durch Verschieben des Startwinkelwerts anzupassen. –
können Sie diese css animation allein mit tun. Zuerst sollten Sie die transform origin auf einen Punkt verschieben, der als Mittelpunkt des Pendels dient. Jetzt können Sie einfach die Winkel für die Drehung so definieren, dass sie 45 Grad voneinander entfernt sind. Bitte überprüfen Sie unter Code als Beispiel:
#container
{
background-color: #777;
border-radius: 50%;
height: 20px;
margin: 0 auto;
margin-top: 150px;
position: relative;
width: 20px;
}
#ball
{
animation: swing 1s ease 0s infinite;
background-color: orange;
border-radius: 50%;
height: 50px;
left: -15px;
position: absolute;
top: -150px;
transform-origin: center 150px;
width: 50px;
}
@keyframes swing{
0%{transform: rotate(-22.5deg);}
50%{transform: rotate(22.5deg);}
100%{transform: rotate(-22.5deg);}
}<div id="container">
<div id="ball"></div>
</div>Vielen Dank für Ihre schnelle Antwort, sehr hilfreich. Ist es möglich, Objekte entlang einer kreisförmigen Bahn zu bewegen, ohne sie zu drehen? Ich habe die Frage mit einem neuen Bild aktualisiert. –
Geben Sie bitte, was Sie bisher –
Absolute Positionierung und einige einfache trigonometrische versucht haben. Sehr gut möglich. –