From 1c170054c1221b9bdfba987bb5cd3ba0f64e37ca Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 05 Dez 2023 16:16:23 +0100
Subject: [PATCH] add CSS 3D Transforms
---
index.html | 36 ++++++++++++++++++++++++++++++++++++
1 files changed, 36 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index 68da8e9..9ab0b43 100644
--- a/index.html
+++ b/index.html
@@ -3414,6 +3414,42 @@
<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 ".html")</p>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3