1 Dateien geändert
3 Dateien hinzugefügt
| Neue Datei |
| | |
|---|
| | | <!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 |
| | |
|---|
| | | <!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>
|
|---|
| | |
|---|
| | | <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> |
|---|
