Erste Schritte mit CSS3-Transformationen

Übersetzt aus: CSS-Übergänge 101
Chinesisch: Einführung in CSS3-Transformationen
Ursprünglicher Autor: Jason Cranford Teague
Übersetzer: Shen Fei
Bitte beachten Sie das Urheberrecht und geben Sie beim Nachdruck die Quelle an, vielen Dank!

Obwohl die Leute einige Änderungen auf dem Bildschirm erwarten, können CSS und HTML zu wenig für die Interaktion auf der Seite tun, und diese müssen noch im Code implementiert werden.

Beispielsweise hat ein Link entweder diese oder jene Farbe; ein Textbereich ist entweder so groß oder so groß; ein Bild ist entweder transparent oder undurchsichtig – dazwischen gibt es keinen Übergang .

Dies führt dazu, dass die meisten Webseiten etwas starr sind, da Elemente nur starr wechseln oder sich ändern.

Ja, Sie können es mit DHTML, jQuery oder dem Schreiben Ihres eigenen JS übertreiben, aber dafür ist mehr Code erforderlich, um eine eigentlich sehr einfache Funktionalität zu implementieren.

Was wir brauchen, ist eine schnelle und einfache Möglichkeit, der Seite einfache Übergangseffekte hinzuzufügen. In diesem Artikel finden Sie nützliche Informationen zu CSS-Übergängen und deren Verwendung.

Vor ein paar Monaten schlug ich vor, dass Designer beginnen sollten, die neuen CSS 3-Technologien zu nutzen , um einige grundlegende Funktionen zu erreichen, nach denen sie sich schon lange gesehnt hatten – das einzige Problem bestand darin, dass keine dieser Technologien im IE verfügbar war, einschließlich IE8.

Die Ansicht einiger Leser, dass diese Technologien für 75 % der Benutzer unsichtbar sein werden, ist unzuverlässig.

Den Lesern da draußen möchte ich sagen: „Halten Sie sich fest“, denn ich stelle Ihnen gleich eine weitere neue CSS-Eigenschaft vor, mit der Sie jedem Element mit nur wenigen Codezeilen coole Transformationseffekte hinzufügen können.

CSS-Transformationen wurden erst in CSS 3 eingeführt, aber als Webkit-Erweiterung hinzugefügt. Das heißt, sie können jetzt nur noch in Webkit-basierten Browsern verwendet werden, einschließlich Apple Safari und Google Chrome. Der Vor-Alpha-Version von Opera 10.5 nach zu urteilen, wird Opera jedoch in der nächsten Version 10.5 CSS 3-Transformationen unterstützen. Um die in diesem Artikel erwähnten tatsächlichen Auswirkungen zu sehen, wird dringend empfohlen, zum Anzeigen dieses Artikels Chrome oder Safari 4 zu verwenden .

Früher waren Transformationen nur ein Teil von Webkit und die Grundlage für einige coole Dinge, die die Safari-Benutzeroberfläche tun konnte, die andere Browser nicht konnten.

Die CSS-Arbeitsgruppe des W3C hat sich jedoch geweigert, Transformationen zu ihren offiziellen Funktionen hinzuzufügen. Einige Mitglieder bestehen darauf, dass Transformationen keine CSS-Eigenschaften sind und besser über Skripte gehandhabt werden sollten. (Ich bin voller Zuversicht. Ich hatte im vorherigen Absatz einen ähnlichen Standpunkt und habe ihn mit Gao Gao besprochen. Ich denke, dass CSS-Animationen den Rahmen der Leistung sprengen. Interaktive Dinge sollten mit Skripten implementiert werden. Aber später unter dem Unter der Anleitung von Bruder Gui begann ich mit einem neuen Verständnis – Shen Fei)

Aber viele Designer und Entwickler, mich eingeschlossen, bestehen darauf, dass es sich tatsächlich um Stile handelt – nur um dynamische Stile und nicht um die traditionellen statischen Stile, die wir jeden Tag verwenden.

Glücklicherweise gehört die dynamische Styling-Debatte der Vergangenheit an. Im vergangenen März begannen Vertreter von Apple und Mozilla damit, CSS-3-Funktionen um CSS-Transformationsmodule zu erweitern , was dem, was Apple bereits zu WebKit hinzugefügt hatte, sehr nahe kommt.

Bevor wir fortfahren, möchte ich Folgendes betonen: Machen Sie die Funktionalität einer Website niemals von einem Stil abhängig, wenn der Stil nicht browseruniversal ist (d. h. von allen gängigen Browsern unterstützt wird).

Für diejenigen, die es verpasst haben, möchte ich noch einmal betonen: Lassen Sie die Funktionalität einer Website niemals vom Stil abhängen, wenn der Stil nicht für alle Browser universell ist .

Allerdings können Sie Stile wie Transformationen als Designverbesserungen verwenden, um das Benutzererlebnis zu verbessern – ohne die Benutzerfreundlichkeit für Benutzer zu beeinträchtigen, die sie nicht sehen können. Wenn es ohne CSS-Transformationen funktioniert und Benutzer ihre Aufgaben trotzdem erledigen können, ist es in Ordnung und Sie können CSS-Transformationen verwenden.