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
---
assets/html/css-transform-3d-cube.html | 100 +++++++++++++++++++++++++
assets/html/css-transform-3d.html | 46 +++++++++++
assets/images/blue-fish.png | 0
index.html | 36 +++++++++
4 files changed, 182 insertions(+), 0 deletions(-)
diff --git a/assets/html/css-transform-3d-cube.html b/assets/html/css-transform-3d-cube.html
new file mode 100644
index 0000000..a9df48a
--- /dev/null
+++ b/assets/html/css-transform-3d-cube.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ * {
+ box-sizing: border-box;
+ }
+
+ body {
+ margin: 0 auto;
+
+ width: 100px;
+ height: 100px;
+
+ perspective: 5000px;
+ }
+
+ .cube {
+ position: relative;
+
+ width: 100%;
+ height: 100%;
+
+ transform-style: preserve-3d;
+
+ transition: transform 1s;
+
+ animation-name: spin;
+ animation-duration: 3s;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotateY(0deg);
+ }
+
+ 100% {
+ transform: rotateY(360deg);
+ }
+ }
+
+ .cube div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ font-size: 25px;
+
+ width: 100px;
+ height: 100px;
+
+ position: absolute;
+
+ border: 1px solid white;
+
+ backface-visibility: hidden;
+
+ color: white;
+ }
+
+ .top {
+ transform: rotateX(90deg) translateZ(50px);
+ }
+
+ .bottom {
+ transform: rotateX(-90deg) translateZ(50px);
+ }
+
+ .left {
+ transform: rotateY(-90deg) translateZ(50px);
+ }
+
+ .right {
+ transform: rotateY(90deg) translateZ(50px);
+ }
+
+ .front {
+ transform: rotateY(0deg) translateZ(50px);
+ }
+
+ .back {
+ transform: rotateY(180deg) translateZ(50px);
+ }
+
+
+ </style>
+ </head>
+ <body>
+ <div class="cube">
+ <div class="front">3</div>
+ <div class="back">4</div>
+ <div class="right">5</div>
+ <div class="left">2</div>
+ <div class="top">1</div>
+ <div class="bottom">6</div>
+ </div>
+ </body>
+</html>
diff --git a/assets/html/css-transform-3d.html b/assets/html/css-transform-3d.html
new file mode 100644
index 0000000..9ed804a
--- /dev/null
+++ b/assets/html/css-transform-3d.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <style>
+ img {
+ width: 100px;
+ height: auto;
+ }
+
+ .canvas {
+ perspective: 1000px;
+ }
+
+ .glass {
+ margin: 0 auto;
+ width: 10%;
+
+ perspective: 1000px;
+ }
+
+ #fish {
+ animation-name: swim;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+ }
+
+ @keyframes swim {
+ from {
+ transform: rotateX(-10deg) rotateY(360deg) translateZ(100px);
+ }
+
+ to {
+ transform: rotateX(-10deg) rotateY(0deg) translateZ(100px);
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <div class="canvas">
+ <div class="glass">
+ <img id="fish" src="../images/blue-fish.png">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/assets/images/blue-fish.png b/assets/images/blue-fish.png
new file mode 100644
index 0000000..7f3927a
--- /dev/null
+++ b/assets/images/blue-fish.png
Binary files differ
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