From a51be20fb7f54eb087f372dfa13a09345e3bef8d Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 05 Dez 2023 16:17:13 +0100
Subject: [PATCH] fix template name
---
index.html | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 152 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index b950554..085d3f5 100644
--- a/index.html
+++ b/index.html
@@ -3298,6 +3298,158 @@
</code>
</pre>
</section>
+ <section>
+ <h3>Transform</h3>
+ <ul>
+ <li>rein optisch, d.h. "physische" Größe bleibt erhalten</li>
+ <li>eine Art "Shader" auf Grafikebene</li>
+ <li>Effekte wie Drehung, Vergrößerung, Verschiebung usw.</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ transform: translateX(20px) translateY(20px);
+ transform-origin: left;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Mögliche Effekte</h3>
+ <ul>
+ <li>translate</li>
+ <li>rotate</li>
+ <li>scale</li>
+ <li>scew</li>
+ </ul>
+ <p>Die meisten besitzen zusätzlich spezifischere X-, Y- oder 3D-Versionen</p>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Probiere die genannten Transform-Effekte in einer beliebigen Seite aus</p>
+ </section>
+ <section>
+ <h3>Transition</h3>
+ <ul>
+ <li>Elemente können "weich" verändert werden</li>
+ <li>Mögliche Attribute, deren Änderungen animiert werden können sind z.B. <code>width</code>, <code>height</code>, <code>transform</code>, <code>color</code> und viele weitere</li>
+ <li>Das Attribut <code>display</code> lässt sich jedoch nicht animieren</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ width: 100%;
+ background-color: red;
+ /* transition: [Attribut] [Dauer] [Zeitfunktion] */
+ transition: width 1s ease-out;
+ }
+
+ .foo:hover {
+ width: 50%;
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transition.html"></iframe>
+ </section>
+ <section>
+ <h3>Animation</h3>
+ <ul>
+ <li>Es können zusätzlich eigene Animationen entworfen werden</li>
+ <li>Definition per <code>Keyframes</code></li>
+ </ul>
+ </section>
+ <section>
+ <h3>Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ animation-duration: 3s;
+ animation-name: slidein;
+ }
+
+ @keyframes slidein {
+ from {
+ margin-left: 100%;
+ width: 300%;
+ }
+
+ to {
+ margin-left: 0%;
+ width: 100%;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Alternative Syntax</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .foo {
+ /* ... */
+ }
+
+ @keyframes slidein {
+ 1% {
+ margin-left: 100%;
+ }
+
+ 100% {
+ margin-left: 0%;
+ }
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-animation.html"></iframe>
+ </section>
+ <section>
+ <h3>3D Transform</h3>
+ <ul>
+ <li>Neben den gewohnten X- und Y-Achsen (Breite und Höhe) gibt es auch noch die Z-Achse</li>
+ <li>Bewegung entlang der Sichtachse, d.h. zum bzw. vom Betrachter weg</li>
+ <li>Perspektivische Effekte möglich</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transform-3d.html"></iframe>
+ </section>
+ <section>
+ <h3>Bedingungen / Optionen</h3>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ .container {
+ perspective: 1000px; /* "Entfernung" des Betrachters */
+
+ transform-style: preserve-3d; /* oder "flat" */
+ }
+
+ .element {
+ backface-visibility: hidden; /* oder "visible" */
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Beispiel</h3>
+ <iframe data-src="/assets/html/css-transform-3d-cube.html"></iframe>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Implementiere einen drehenden Würfel (Vorlage "templates/008-css/css-3d-cube.html")</p>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3