Ich möchte ein Objekt von -180 Grad zu 180 Grad über CSS3 Transformationen und Übergänge drehen. Das funktioniert gut, aber ich möchte die Drehrichtung steuern. Wie kann man feststellen, ob es im oder gegen den Uhrzeigersinn läuft?Wie bestimmt man die Drehrichtung in CSS3-Übergängen?
0 .. 180 ist im Uhrzeigersinn, 0 .. -180 ist gegen den Uhrzeigersinn. Also, positive Zahl dreht im Uhrzeigersinn, negativ - andersherum.
habe ich ein Beispiel dafür, wie sich zu drehen:
<html>
<style type="text/css">
.rotatedDiv {
margin-top: 200px;
margin-left: 200px;
-webkit-transition: -webkit-transform 3s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
</style>
<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>
</body>
</html>
Zuerst zeigen wir gedreht div. Wenn Sie darauf klicken, wird es sich drehen. Abhängig vom Wert - negativ oder positiv - dreht es sich gegen den Uhrzeigersinn oder im Uhrzeigersinn.
Aber was, wenn Sie einen Übergang zwischen 30 und 40 Grad wollen, nur gegen den Uhrzeigersinn? – Monokai
Ich habe ein Beispiel hinzugefügt –
Danke. Am Ende habe ich eine Lösung gefunden, ausgelöst durch dein Beispiel. Die Abschlüsse sind nicht auf mindestens 0 und maximal 360 beschränkt. Sie können beispielsweise auch -720 angeben. Auf diese Weise können Sie die Bewegung im und gegen den Uhrzeigersinn steuern. – Monokai
Es scheint, dass Sie auch daran denken müssen, die "von" anfänglichen konkreten Werte einzugeben, da sich sonst das +/- Richtungszeichen nicht gut verhält.
Ich denke, Sie müssen einen Mittelpunkt in Ihrer Animation einstellen. Ich habe nichts gesehen, mit dem Sie angeben können, auf welche Weise die Drehung geht. – drudge
Also das ist über css3 animation properties meinst du? Ja, das dachte ich mir auch, aber ich würde es gerne mit einfachen css3 Transition- und Transformationseigenschaften machen, wenn es überhaupt möglich ist. – Monokai