DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft transform-origin wird in Verbindung mit CSS-Transformationen verwendet und ermöglicht es Ihnen, den Ursprung einer Transformation zu ändern.
.element {
transform: rotate(360deg);
transform-origin: top left;
}Wie oben angegeben, kann die Eigenschaft transform-origin für eine 2D-Transformation bis zu zwei durch Leerzeichen getrennte Schlüsselwörter oder Längenwerte und für eine 3D-Transformation bis zu drei Werte aufnehmen.
Die Anwendung des obigen Codes auf eine Box von 200 x 200 Pixeln, wobei die Transformation auf eine über ein Klickereignis übertragene Transformation angewendet wird, würde sich wie folgt verhalten:
Standardmäßig ist der Ursprung einer Transformation „50% 50%“, also genau in der Mitte jedes gegebenen Elements. Durch Ändern des Ursprungs in „top left“ (wie in der obigen Demo) wird die Rotation des Elements von der oberen linken Ecke des Elements aus durchgeführt.
Werte können Längen, Prozentsätze oder die Schlüsselwörter top, left, right, bottom und center sein.
Der erste Wert ist die horizontale Position, der zweite Wert ist die vertikale Position und der dritte Wert repräsentiert die Position auf der Z-Achse. Der dritte Wert funktioniert nur, wenn Sie 3D-Transformationen verwenden, und er darf kein Prozentsatz sein.
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 9+ | Alle | 3.5+ | Alle | Alle | 11.5+ |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | 91+ | Alle | Alle |
Css-tricks.com ist wirklich nützlich für Webdesigner.. :)
Welche jQuery-Bibliothek sollte ich für diesen Code verwenden?
Keine, es ist reines CSS.
Am besten verwenden Sie https://github.com/madrobby/vapor.js, ziemlich gut für die Implementierung dieser Transformationen.
Es sei denn, Sie sprechen von Fallback-Code. CSS-Tricks sind für CSS-Tricks, selten wird JS für den eigentlichen Effekt verwendet. Wenn Sie sich auf Codepen beziehen, können Sie sehen, dass es minimale JS-Elemente gibt und keine Bibliotheken verwendet werden. Dies würde den CSS-Workaround an sich überflüssig machen. Daher sollten, abgesehen von IE9 (und älter), herstellerspezifische Präfixe in den meisten Fällen alle anderen Browser für diese Methoden unterstützen.
Willkommen bei CSS Tricks!
Hallo. Ich frage mich, ob dies eine Lösung für ein Problem sein könnte, das ich habe.
Ich habe transform: scale(.5,.5); verwendet, aber meine Ränder verhalten sich so, als ob das Element nicht skaliert worden wäre. Wenn ich den Browser vergrößere, drückt der linke Rand das Element vom Rand weg. Wenn ich Elemente inspiziere und die Transformation ausschalte, kann ich sehen, dass das Element auf die ursprüngliche Größe (vor der Transformation) reagiert.
Gibt es eine Möglichkeit, transform-origin zu verwenden, um dies zu korrigieren? Ich habe transform-origin: 25% 50%; versucht, aber das Problem besteht fort, nur in anderen Proportionen.
Ich beziehe mich auf das untere Bild auf dieser Seite: stephendanison.com/mondrian
Haben Sie jemals eine Lösung dafür gefunden?
Denn das ist GENAU das Problem, das ich habe....
Ich hatte gerade das gleiche Problem und habe es wie folgt gelöst:
- Sie müssen zuerst das DIV nach links drehen (rotieren -90) um seine untere linke Ecke.
- Dann verschieben Sie es nach rechts (left: Xpx) um genau die Anzahl von Pixeln, die der ursprünglichen Höhe entspricht!
Ergebnis: Die ursprüngliche obere linke Ecke ist zur ursprünglichen unteren linken Ecke gewandert und daher funktioniert die Skalierung wie erwartet.
Hier ist der HTML-Code
Test
und CSS
.vertical {
height: 30px;
width: 60 px;
transform-origin: bottom left;
transform: rotate(-90deg);
left: 30px;
}
Grüße,
GermanChris
Hallo!
Sagen Sie mir bitte, kann ich transform-origin nur für die Rotation angeben und diesen Effekt für andere Eigenschaften deaktivieren.
Sie würden einfach das Tag-Attribut transform-origin: initial; als Reset-Wert verwenden. Siehe Transform Origin Attributes
Hallo,
Das ist gut, aber kann mir jemand bei dieser komplizierten Aufgabe helfen...
Ich möchte ein Div erstellen, dessen untere rechte Ecke länger ist als die obere rechte Ecke (d.h. die untere Linie ist länger als die obere). Wie kann ich das erreichen?
Ich habe den ganzen verdammten Tag danach gesucht. Danke Chris.
Gibt es einen besonderen Grund, warum Sie
transform-origin: top leftanstelle von
transform-origin: left top?Ich hätte gedacht, der erste Wert bezieht sich auf die horizontale Position, während der zweite Wert auf die vertikale Position. Oder ist es so, dass die Reihenfolge der Werte bei der Verwendung von Schlüsselwörtern wie left, right, center, top usw. keine Rolle spielt?