Der folgende Beitrag ist ein Gastbeitrag von Dylan Winn-Brown, der uns eine performante Methode zeigt, um diesen Designeffekt zu erzielen.
Als ich kürzlich an der Website eines Kunden arbeitete, wurde ich gebeten, einen Effekt wie diesen zu replizieren.
Container mit…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 bis zu zwei durch Leerzeichen getrennte …
Sie können Bilder mit CSS umdrehen! Mögliches Szenario: nur eine Grafik für einen „Pfeil“ zu haben, sie aber umzudrehen, damit sie in verschiedene Richtungen zeigt.
.flip-horizontally {
transform: scaleX(-1);
}Sehen Sie hier, wie ein Pfeil verwendet wird, um in beide Richtungen zu zeigen:…
Wenn Sie nach einer Möglichkeit suchen, Text vertikal zu setzen, ist CSS writing-mode wahrscheinlich Ihre beste Wahl.
Wenn Sie einfach nur Text drehen möchten, können Sie ganze Elemente wie folgt drehen, was sie um 90 …