deploy: web-development/web-development-textbook@7f603d6

Author: bjelline

grafik/cssgrafik/index.html

@@ -243,6 +243,21 @@ <h2 id="animation-mit-keyframes">Animation mit Keyframes</h2>
 
 <a class="slide_break" id="slide-9" href="slide.html#slide-9"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 9">▻</a>
 
+<h2 id="transform">Transform</h2>
+
+<p>Achtung, Verwechslungsgefahr: <code>transition</code> macht die Animation, hat also eine
+Zeitkomponente. Die transform-Properties verändert die Darstellung einer DOM-Node, haben keine Zeitkomponente:</p>
+
+<ul>
+  <li>MDN: <a href="https://developer.mozilla.org/de/docs/Web/CSS/transform-function/scale">scale</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate">rotate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/translate">translate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform">transform</a> - alles in einem</li>
+</ul>
+
+
+<a class="slide_break" id="slide-10" href="slide.html#slide-10"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 10">▻</a>
+
 <h2 id="perspektive">Perspektive</h2>
 
 <p>Mit Transforms kann man ein bisschen 3d in HTML und CSS bringen:
@@ -254,20 +269,25 @@ <h2 id="perspektive">Perspektive</h2>
 <p>Von David DeSandro gibt es ein ausführliches <a href="http://desandro.github.io/3dtransforms/">Tutorial</a> dazu.</p>
 
 
-<a class="slide_break" id="slide-10" href="slide.html#slide-10"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 10">▻</a>
+<a class="slide_break" id="slide-11" href="slide.html#slide-11"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 11">▻</a>
 
 <h2 id="resume">Resume</h2>
 
 <p>Im Zweifelsfall sollten Sie immer die einfachste technische Lösung
 für ihr Problem wählen. Bei Grafik kann das ganz oft einfaches HTML + CSS sein.</p>
 
 
-<a class="slide_break" id="slide-11" href="slide.html#slide-11"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 11">▻</a>
+<a class="slide_break" id="slide-12" href="slide.html#slide-12"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 12">▻</a>
 
 <h2 id="siehe-auch">Siehe auch</h2>
 
 <ul>
-  <li><a href="https://tobiasahlin.com/moving-letters/">Animation mit CSS</a> von Tobias Ahlin</li>
+  <li>MDN: <a href="https://developer.mozilla.org/de/docs/Web/CSS/transform-function/scale">scale</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate">rotate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/translate">translate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform">transform</a></li>
+  <li><a href="https://svg-path-visualizer.netlify.app/#M20%2C20%20C20%2C100%20200%2C0%20200%2C100">SVG Path Visualizer</a></li>
+  <li><a href="https://tobiasahlin.com/moving-letters/">Text Animation mit CSS+JS</a> von Tobias Ahlin</li>
 </ul>
  <div class="pagination">
   <ul>

grafik/cssgrafik/slide.html

@@ -279,6 +279,21 @@ <h2 id="animation-mit-keyframes">Animation mit Keyframes</h2>
 </div>
 <div class="slide">
 
+<h2 id="transform">Transform</h2>
+
+<p>Achtung, Verwechslungsgefahr: <code>transition</code> macht die Animation, hat also eine
+Zeitkomponente. Die transform-Properties verändert die Darstellung einer DOM-Node, haben keine Zeitkomponente:</p>
+
+<ul>
+  <li>MDN: <a href="https://developer.mozilla.org/de/docs/Web/CSS/transform-function/scale">scale</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate">rotate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/translate">translate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform">transform</a> - alles in einem</li>
+</ul>
+
+</div>
+<div class="slide">
+
 <h2 id="perspektive">Perspektive</h2>
 
 <p>Mit Transforms kann man ein bisschen 3d in HTML und CSS bringen:
@@ -303,7 +318,12 @@ <h2 id="resume">Resume</h2>
 <h2 id="siehe-auch">Siehe auch</h2>
 
 <ul>
-  <li><a href="https://tobiasahlin.com/moving-letters/">Animation mit CSS</a> von Tobias Ahlin</li>
+  <li>MDN: <a href="https://developer.mozilla.org/de/docs/Web/CSS/transform-function/scale">scale</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate">rotate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/translate">translate</a></li>
+  <li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform">transform</a></li>
+  <li><a href="https://svg-path-visualizer.netlify.app/#M20%2C20%20C20%2C100%20200%2C0%20200%2C100">SVG Path Visualizer</a></li>
+  <li><a href="https://tobiasahlin.com/moving-letters/">Text Animation mit CSS+JS</a> von Tobias Ahlin</li>
 </ul>
 </div>
     <div class="slide">