3D Umkreise auf der X-Achse
Ich versuche eine CSS-Animation zu erstellen, bei der es so aussieht, als würde sich ein div um ein Bild (oder ein anderes div) auf der X-Achse drehen.
Ich konnte eine ungefähre Vorstellung davon machen: Ссылка , aber das animierte Div hat nicht den Rotationseffekt, den ich suche zum. Ich denke, dass ich eine Art von rotateX () hinzufügen muss, um die Perspektive zu transformieren und hinzuzufügen, aber ich kann einfach nicht die richtige Kombination herausfinden. Ich habe ein grobes Bild von der Art von Animation, die ich versuche zu erreichen.
Hier ist mein aktueller Animationscode:
%Vor% 
2 Antworten
Hier ist ein einfacher 3D-Übergang, der aussieht wie das, was Sie erreichen möchten. Das Problem ist, dass Sie übersetzen, aber Ihr Ziel ist es, auf der X-Achse zu drehen. Um den Übergang zu starten, schweben Sie das div:
Wenn Sie möchten, dass das rotierende Div immer dem Benutzer zugewandt ist, können Sie nach der translatez -Eigenschaft wie folgt eine weitere Rotation hinzufügen:
Diese funktionieren, weil wenn Sie die Eigenschaften für die gleiche Deklaration ketten, die letzte nach den vorhergehenden Deklarationen erstellt wird. Das Koordinatensystem bewegt sich mit den vorherigen Transformationen.
Ich fühle mich schlecht für diese Antwort; Ich werde die Animation genau bekommen. Einen Moment -
Bearbeiten: Fest.
Ein bisschen schlampig, aber hier ist ein funktionierendes Beispiel für das Konzept, für das Sie fotografieren. Spiele mit den Zahlen, um zu bekommen, wie du es willst. Aus den Diagrammen ist nicht ersichtlich, welche Art von Fluss Sie suchen:
Ссылка
(Sie hatten eine nervtötende Ursprungseigenschaft, die ich nicht sehen konnte. Warf in einigen TranslateZ -Regeln, um etwas zu reinigen.)
Ich habe dieses Arbeitsbeispiel auch gegabelt, nachdem ich die Ausrichtung geändert habe: Ссылка (und original) Ссылка
Der Schlüssel hier ist mit transform:rotateY(Xdeg);
Probieren Sie einen Teil des Codes aus. Hier ist Ihre Animation CSS wie es ist:
%Vor% Tipp: Wenn Sie mit diesen Arten von Rotationen arbeiten, ist es am besten, zuerst die unwesentlichen Dinge wie z-index zu entfernen und dann die Bewegung runter zu bekommen. Sie können sich später immer um das Zeug sorgen.
Für eine mehr kreisförmige Rotation möchten Sie möglicherweise die Auswirkungen der Rotation mit der Translation staffeln. Mit anderen Worten, versuchen Sie, dass einer der Effekte an verschiedenen Stellen der Animation etwas vor dem anderen passiert.
Tags und Links css animation css3 css-animations css-transforms