Guten Morgen! Ich hab jetzt mal ein bisschen gehirnt: # Stand heute Wir haben 2 (3) Tutorials: * [SVG/Transformationen](https://wiki.selfhtml.org/wiki/Transform/SVG-Transformationen) - mit dem SVG-Transform-Attribut und entsprechenden Funktionen - klar aufgebaut, aber ein bisschen technisch mit dem Karoraster * [CSS/Tutorials/Transform](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/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**](https://drafts.csswg.org/css-transforms-2/) (csswg) Ich habe mir dort den Aufbau angeschaut: * [4. The Transform Rendering Model](https://drafts.csswg.org/css-transforms-2/#transform-rendering) - Mathe pur - hier würde ich gerne erst mal einführende Beispiele sehen und das später erklären. * [5. individual-transforms](https://drafts.csswg.org/css-transforms-2/#individual-transforms) - hier kommen zuerst die („einfacheren“) Einzeleigenschaften `translate`, `scale`und `rotate`. * 7-10 führen die anderen Eigenschaften `transform-style`, `perspective`und `backface-visibility`ein. → würde ich im vorhandenen Kapitel [3d-Transformationen](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/3D-Transforms) abhandeln * [**11. SVG and 3D transform functions**](https://drafts.csswg.org/css-transforms-2/#svg-three-dimensional-functions) - hier und bis Kap. 16 kommen jetzt die Funktionen und ihre Kombinationen in der Matrix - da haben wir im SVG-Artikel [etwas dazu](https://wiki.selfhtml.org/wiki/Transform/SVG-Transformationen#matrix) # 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](https://wiki.selfhtml.org/wiki/Transform) > - [Drehen,_Kreisen_und_Pendeln#kombinierte_Transformationen_animieren](https://wiki.selfhtml.org/wiki/Transform#transform-Eigenschaft) > > > > 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**](https://wiki.selfhtml.org/wiki/Transform#translate) einführen. `translate: 10em 100px;`entspricht der normalen CSS-Syntax wie bei anderen Eigenschaften auch. ## scale Dann kann man den vorhandenen [Abschnitt über `scale`](https://wiki.selfhtml.org/wiki/Transform#scale) nach oben ziehen. Hier wäre eben meine Frage, ob 1. das Beispiel mit :hover 2. eine [automatische Animation wie hier](https://wiki.selfhtml.org/wiki/Transform#scale.28.29) bei scale() oder die 3. [mehrfache Verwendung](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-62-transform-scale.html) eines „Musters“ für Anfänger verständlicher wäre. ## Funktionen > Die einzelnen Funktionen könnte man evtl. bei [CSS/Funktionen](https://wiki.selfhtml.org/wiki/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 -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!

Guten Morgen! Ich hab jetzt mal ein bisschen gehirnt: # Stand heute Wir haben 2 (3) Tutorials: * [SVG/Transformationen](https://wiki.selfhtml.org/wiki/SVG/Transformationen) - mit dem SVG-Transform-Attribut und entsprechenden Funktionen - klar aufgebaut, aber ein bisschen technisch mit dem Karoraster * [CSS/Tutorials/Transform](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/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**](https://drafts.csswg.org/css-transforms-2/) (csswg) Ich habe mir dort den Aufbau angeschaut: * [4. The Transform Rendering Model](https://drafts.csswg.org/css-transforms-2/#transform-rendering) - Mathe pur - hier würde ich gerne erst mal einführende Beispiele sehen und das später erklären. * [5. individual-transforms](https://drafts.csswg.org/css-transforms-2/#individual-transforms) - hier kommen zuerst die („einfacheren“) Einzeleigenschaften `translate`, `scale`und `rotate`. * 7-10 führen die anderen Eigenschaften `transform-style`, `perspective`und `backface-visibility`ein. → würde ich im vorhandenen Kapitel [3d-Transformationen](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/3D-Transforms) abhandeln * [**11. SVG and 3D transform functions**](https://drafts.csswg.org/css-transforms-2/#svg-three-dimensional-functions) - hier und bis Kap. 16 kommen jetzt die Funktionen und ihre Kombinationen in der Matrix - da haben wir im SVG-Artikel [etwas dazu](https://wiki.selfhtml.org/wiki/SVG/Transformationen#matrix) # 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform) > - [Drehen,_Kreisen_und_Pendeln#kombinierte_Transformationen_animieren](https://wiki.selfhtml.org/wiki/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**](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Transform-translate1.html) einführen. `translate: 10em 100px;`entspricht der normalen CSS-Syntax wie bei anderen Eigenschaften auch. ## scale Dann kann man den vorhandenen [Abschnitt über `scale`](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#scale) nach oben ziehen. Hier wäre eben meine Frage, ob 1. das Beispiel mit :hover 2. eine [automatische Animation wie hier](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#scale.28.29) bei scale() oder die 3. [mehrfache Verwendung](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-62-transform-scale.html) eines „Musters“ für Anfänger verständlicher wäre. ## Funktionen > Die einzelnen Funktionen könnte man evtl. bei [CSS/Funktionen](https://wiki.selfhtml.org/wiki/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 -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!

Guten Morgen! Ich hab jetzt mal ein bisschen gehirnt: # Stand heute Wir haben 2 (3) Tutorials: * [SVG/Transformationen](https://wiki.selfhtml.org/wiki/SVG/Transformationen) - mit dem SVG-Transform-Attribut und entsprechenden Funktionen - klar aufgebaut, aber ein bisschen technisch mit dem Karoraster * [CSS/Tutorials/Transform](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/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 spezifiziert: * [**CSS Transforms Module Level 2**](https://drafts.csswg.org/css-transforms-2/) (csswg) Ich habe mir dort den Aufbau angeschaut: * [4. The Transform Rendering Model](https://drafts.csswg.org/css-transforms-2/#transform-rendering) - Mathe pur - hier würde ich gerne erst mal einführende Beispiele sehen und das später erklären. * [5. individual-transforms](https://drafts.csswg.org/css-transforms-2/#individual-transforms) - hier kommen zuerst die („einfacheren“) Einzeleigenschaften `translate`, `scale`und `rotate`. * 7-10 führen die anderen Eigenschaften 'transform-style`, `perspective`und `backface-visibility`ein. → würde ich in einem Kapitel [3d-Transformationen](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/3D-Transforms) abhandeln * [**11. SVG and 3D transform functions**](https://drafts.csswg.org/css-transforms-2/#svg-three-dimensional-functions) - hier und bis Kap. 16 kommen jetzt die Funktionen und ihre Kombinationen in der Matrix - da haben wir im SVG-Artikel [etwas dazu](https://wiki.selfhtml.org/wiki/SVG/Transformationen#matrix) # 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform) > - [Drehen,_Kreisen_und_Pendeln#kombinierte_Transformationen_animieren](https://wiki.selfhtml.org/wiki/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**](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Transform-translate1.html) einführen. `translate: 10em 100px;`entspricht der normalen CSS-Syntax wie bei anderen Eigenschaften auch. ## scale Dann kann man den vorhandenen [Abschnitt über `scale`](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#scale) nach oben ziehen. Hier wäre eben meine Frage, ob 1. das Beispiel mit :hover 2. eine [automatische Animation wie hier](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#scale.28.29) bei scale() oder die 3. [mehrfache Verwendung](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-62-transform-scale.html) eines „Musters“ für Anfänger verständlicher wäre. ## Funktionen > Die einzelnen Funktionen könnte man evtl. bei [CSS/Funktionen](https://wiki.selfhtml.org/wiki/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 -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!

Guten Morgen! Ich hab jetzt mal ein bisschen gehirnt: # Stand heute Wir haben 2 (3) Tutorials: * [SVG/Transformationen](https://wiki.selfhtml.org/wiki/SVG/Transformationen) - mit dem SVG-Transform-Attribut und entsprechenden Funktionen - klar aufgebaut, aber ein bisschen technisch mit dem Karoraster * [CSS/Tutorials/Transform](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform) - das gleiche in CSS - die „neuen“ CSS-Eigenschaften translate, scale und rotate nur als Appendix - fehlende Erklärung, wie man Transformationen kombiniert. * [SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren#Transformationen](https://wiki.selfhtml.org/wiki/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 spezifiziert: * [**CSS Transforms Module Level 2**](https://drafts.csswg.org/css-transforms-2/) (csswg) Ich habe mir dort den Aufbau angeschaut: * [4. The Transform Rendering Model](https://drafts.csswg.org/css-transforms-2/#transform-rendering) - Mathe pur - hier würde ich gerne erst mal einführende Beispiele sehen und das später erklären. * [5. individual-transforms](https://drafts.csswg.org/css-transforms-2/#individual-transforms) - hier kommen zuerst die („einfacheren“) Einzeleigenschaften `translate`, `scale`und `rotate`. * 7-10 führen die anderen Eigenschaften 'transform-style`, `perspective`und `backface-visibility`ein. → würde ich in einem Kapitel [3d-Transformationen](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/3D-Transforms) abhandeln * [**11. SVG and 3D transform functions**](https://drafts.csswg.org/css-transforms-2/#svg-three-dimensional-functions) - hier und bis Kap. 16 kommen jetzt die Funktionen und ihre Kombinationen in der Matrix - da haben wir im SVG-Artikel [etwas dazu](https://wiki.selfhtml.org/wiki/SVG/Transformationen#matrix) # 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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform) > - [Drehen,_Kreisen_und_Pendeln#kombinierte_Transformationen_animieren](https://wiki.selfhtml.org/wiki/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**](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Transform-translate1.html) einführen. `translate: 10em 100px;`entspricht der normalen CSS-Syntax wie bei anderen Eigenschaften auch. ## scale Dann kann man den vorhandenen [Abschnitt über `scale`](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#scale) nach oben ziehen. Hier wäre eben meine Frage, ob 1. das Beispiel mit :hover 2. eine [automatische Animation wie hier](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform#scale.28.29) bei scale() oder die 3. [mehrfache Verwendung](https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-62-transform-scale.html) eines „Musters“ für Anfänger verständlicher wäre. ## Funktionen > Die einzelnen Funktionen könnte man evtl. bei [CSS/Funktionen](https://wiki.selfhtml.org/wiki/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 -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!