public/web-development/presentation.git

Parent: 2f6d1e44 | Patch | Commit | ignore whitespace

Sascha Schulz

2023-12-05 1c170054c1221b9bdfba987bb5cd3ba0f64e37ca

add CSS 3D Transforms

1 Dateien geändert

3 Dateien hinzugefügt

	assets/html/css-transform-3d-cube.html	100 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/html/css-transform-3d.html	46 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/blue-fish.png	Patch \| Ansicht \| Raw \| Blame \| Historie
	index.html	36 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie

 assets/html/css-transform-3d-cube.html

Neue Datei
@@ -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>


 assets/html/css-transform-3d.html

Neue Datei
@@ -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>


 assets/images/blue-fish.png


 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>

Neue Datei
			@@ -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>

Neue Datei
			@@ -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>

			@@ -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>