Neustart Transform-Tutorial

[Matthias Scharwies]

Guten Morgen!

Ich hab jetzt mal ein bisschen gehirnt:

Stand heute

Wir haben 2 (3) Tutorials:

• SVG/Transformationen
  • mit dem SVG-Transform-Attribut und entsprechenden Funktionen
  • klar aufgebaut, aber ein bisschen technisch mit dem Karoraster
• CSS/Tutorials/Transform
  • fast das gleiche in CSS
  • die „neuen“ CSS-Eigenschaften translate, scale und rotate nur als Appendix - mittlerweile kann man sie in allen Browsern verwenden
  • fehlende Erklärung, wie man Transformationen kombiniert.
• SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren#Transformationen
  • Vergleich der Unterschiede, besonders der unterschiedliche Ursprung (50% 50% bei CSS; 0|0 bei SVG)

---

Die Spec

Mittlerweile ist das in einem Modul (CSS + SVG zusammen) spezifiziert:

• CSS Transforms Module Level 2 (csswg)

Ich habe mir dort den Aufbau angeschaut:

• 4. The Transform Rendering Model
  • Mathe pur - hier würde ich gerne erst mal einführende Beispiele sehen und das später erklären.
• 5. individual-transforms
  • hier kommen zuerst die („einfacheren“) Einzeleigenschaften translate, scaleund rotate.
• 7-10 führen die anderen Eigenschaften transform-style, perspectiveund backface-visibilityein. → würde ich im vorhandenen Kapitel 3d-Transformationen abhandeln
• 11. SVG and 3D transform functions - hier und bis Kap. 16 kommen jetzt die Funktionen und ihre Kombinationen in der Matrix
  • da haben wir im SVG-Artikel etwas dazu

Baustelle

Ich würde ja am Liebsten immer nur die entsprechenden Artikel im SELF-Wiki verlinken, aber da fehlt uns irgendwo irgendetwas:

• CSS/Tutorials/Transform
  • Drehen,_Kreisen_und_Pendeln#kombinierte_Transformationen_animieren

Nutzt man die CSS Eigenschaften scale, translate und rotate statt der Transform-Funktionen, dann

gibt man die Flexibilität auf, die Reihenfolge der Operationen bestimmen zu können.

Hier bräuchte man ganz am Anfang des Tutorials ein etwas komplexeres Beispiel, bei dem man

• mit transform: scale() etwas vergößert,
• was dann woanders steht und
• mit transform: translate() scale() erst skaliert und dann an seinen vorherigen Platz verschoben wird.

translate

Ich würde im Tutorial anfangs die translate-Eigenschaft anhand dieses neuen Beispiels einführen.

translate: 10em 100px;entspricht der normalen CSS-Syntax wie bei anderen Eigenschaften auch.

scale

Dann kann man den vorhandenen Abschnitt über scale nach oben ziehen.

Hier wäre eben meine Frage, ob

1. das Beispiel mit :hover
2. eine automatische Animation wie hier bei scale() oder die
3. mehrfache Verwendung eines „Musters“ für Anfänger verständlicher wäre.

Funktionen

Die einzelnen Funktionen könnte man evtl. bei CSS/Funktionen anlegen. Irgendwie müsste man da alles umschmeißen.

Da stellt sich mir die Frage, ob man für jede Funktion ein eigenes Beispiel benötigt, oder ob man ein Beispiel erstellt, in dem zwei Funktionen gegenübergestellt werden. Optimalerweise wäre das dann eben noch ein Beispiel aus der Praxis.

Wenn ihr das ok gebt, würde ich das 1. Kapitel mit den „einfacheren“ Eigenschaften translate, scale und rotate am Wochenende schreiben.

Frage

Sollte man die beiden vorhandenen Tutorials zu einem zusammenfassen?

Oder schreiben … Hättest du Lust, im Wiki aktiv zu werden?

wenn Du Journalist bist, gibt es eigentlich wirklich keinen Grund noch abzulehnen. 😀

Herzliche Grüße

Matthias Scharwies