Verwendung von CSS-Transformationen
Durch die Modifizierung des Koordinatenraums ändern CSS-Transformationen die Form und Position des betroffenen Inhalts, ohne den normalen Dokumentenfluss zu stören. Dieser Leitfaden bietet eine Einführung in die Verwendung von Transformationen.
CSS-Transformationen werden mit einer Reihe von CSS-Eigenschaften implementiert, die es ermöglichen, affine lineare Transformationen auf HTML-Elemente anzuwenden. Diese Transformationen umfassen Rotation, Schrägstellung, Skalierung und Translation sowohl in der Ebene als auch im 3D-Raum.
Warnung:
Nur transformierbare Elemente können transform
iert werden; das heißt, alle Elemente, deren Layout durch das CSS-Boxmodell geregelt wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellenspalten-Boxen und Tabellenspalten-Gruppenboxen.
CSS-Transformations-Eigenschaften
Zwei wesentliche Eigenschaften werden zur Definition von CSS-Transformationen verwendet: transform
(oder die einzelnen translate
, rotate
und scale
Eigenschaften) und transform-origin
.
transform-origin
-
Gibt die Position des Ursprungs an. Standardmäßig befindet er sich in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen wie Rotationen, Skalierungen oder Schrägstellungen verwendet, die einen spezifischen Punkt als Parameter benötigen.
transform
-
Gibt die Transformationen an, die auf das Element angewendet werden sollen. Es ist eine durch Leerzeichen getrennte Liste von Transformationen, die nacheinander angewendet werden, wie durch den Kompositionsvorgang erforderlich. Zusammengesetzte Transformationen werden effektiv in der Reihenfolge von rechts nach links angewendet.
Beispiele
Hier ist ein unverändertes Bild des MDN-Logos:
Rotieren
Hier ist das MDN-Logo, um 90 Grad von seiner unteren linken Ecke aus gedreht.
<img src="logo.png" alt="MDN Logo" />
img {
rotate: 90deg;
transform-origin: bottom left;
}
Schrägstellen und Übersetzen
Hier ist das MDN-Logo um 10 Grad schräggestellt und um 150 Pixel auf der X-Achse verschoben.
<img src="logo.png" alt="MDN logo" />
img {
transform: skewX(10deg) translateX(150px);
transform-origin: bottom left;
}
3D-spezifische CSS-Eigenschaften
3D-Transformationen durchzuführen ist etwas komplexer. Sie müssen zunächst den 3D-Raum konfigurieren, indem Sie ihm eine Perspektive geben, dann müssen Sie konfigurieren, wie sich Ihre 2D-Elemente in diesem Raum verhalten.
Perspektive
Das erste zu setzende Element ist die perspective
. Die Perspektive ist das, was uns den 3D-Eindruck gibt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner sind sie.
Perspektive setzen
Dieses Beispiel zeigt einen Würfel mit der Perspektive auf unterschiedlichen Positionen. Wie schnell der Würfel schrumpft, wird durch die perspective
-Eigenschaft definiert. Je kleiner der Wert ist, desto tiefer ist die Perspektive.
HTML
Der folgende HTML-Code erstellt vier Kopien derselben Box, wobei die Perspektive auf verschiedene Werte gesetzt ist.
<table>
<tbody>
<tr>
<th><code>perspective: 250px;</code></th>
<th><code>perspective: 350px;</code></th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube perspective-250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="cube perspective-350">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
</tr>
<tr>
<th><code>perspective: 500px;</code></th>
<th><code>perspective: 650px;</code></th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube perspective-500">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="cube perspective-650">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS
Das CSS definiert Klassen, die verwendet werden können, um die Perspektive auf unterschiedliche Distanzen zu setzen. Es umfasst auch Klassen für die Container-Box und den Würfel selbst sowie jede seiner Flächen.
/* Shorthand classes for different perspective values */
.perspective-250 {
perspective: 250px;
}
.perspective-350 {
perspective: 350px;
}
.perspective-500 {
perspective: 500px;
}
.perspective-650 {
perspective: 650px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 200px;
height: 200px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
backface-visibility: visible;
}
/* Define each face based on direction */
.front {
background: rgb(0 0 0 / 30%);
transform: translateZ(50px);
}
.back {
background: rgb(0 255 0 / 100%);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(196 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 196 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(196 196 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(196 0 196 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the table a little nicer */
th,
p,
td {
background-color: #eeeeee;
padding: 10px;
font-family: sans-serif;
text-align: left;
}
Ergebnis
Das zweite zu konfigurierende Element ist die Position des Betrachters mit der perspective-origin
-Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer angemessen ist.
Den Ursprung der Perspektive ändern
Dieses Beispiel zeigt Würfel mit gängigen perspective-origin
-Werten.
HTML
<section>
<figure>
<figcaption><code>perspective-origin: top left;</code></figcaption>
<div class="container">
<div class="cube po-tl">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: top;</code></figcaption>
<div class="container">
<div class="cube po-tm">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: top right;</code></figcaption>
<div class="container">
<div class="cube po-tr">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: left;</code></figcaption>
<div class="container">
<div class="cube po-ml">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
<div class="container">
<div class="cube po-mm">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: right;</code></figcaption>
<div class="container">
<div class="cube po-mr">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: bottom left;</code></figcaption>
<div class="container">
<div class="cube po-bl">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: bottom;</code></figcaption>
<div class="container">
<div class="cube po-bm">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: bottom right;</code></figcaption>
<div class="container">
<div class="cube po-br">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
<div class="container">
<div class="cube po-200200neg">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
<div class="container">
<div class="cube po-200200pos">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
<figure>
<figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
<div class="container">
<div class="cube po-200200">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</figure>
</section>
CSS
/* perspective-origin values (unique per example) */
.po-tl {
perspective-origin: top left;
}
.po-tm {
perspective-origin: top;
}
.po-tr {
perspective-origin: top right;
}
.po-ml {
perspective-origin: left;
}
.po-mm {
perspective-origin: 50% 50%;
}
.po-mr {
perspective-origin: right;
}
.po-bl {
perspective-origin: bottom left;
}
.po-bm {
perspective-origin: bottom;
}
.po-br {
perspective-origin: bottom right;
}
.po-200200neg {
perspective-origin: -200% -200%;
}
.po-200200pos {
perspective-origin: 200% 200%;
}
.po-200200 {
perspective-origin: 200% -200%;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 100px;
height: 100px;
margin: 24px;
border: none;
}
.cube {
width: 100%;
height: 100%;
perspective: 300px;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
backface-visibility: visible;
}
/* Define each face based on direction */
.front {
background: rgb(0 0 0 / 30%);
transform: translateZ(50px);
}
.back {
background: rgb(0 255 0 / 100%);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(196 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 196 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(196 196 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(196 0 196 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
/* Make the layout a little nicer */
section {
background-color: #eee;
padding: 10px;
font-family: sans-serif;
text-align: left;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Ergebnis
Nachdem Sie dies getan haben, können Sie an dem Element im 3D-Raum arbeiten.
Siehe auch
- Die CSS
transform
-Eigenschaft und die CSS<transform-function>
-Datentypen - Die einzelnen Transformationseigenschaften:
translate
,rotate
undscale
(Es gibt keineskew
-Eigenschaft) - Verwendung der Geräteorientierung mit 3D-Transformationen
- Einführung in CSS 3D-Transformationen (Blogbeitrag von David DeSandro)
- CSS Transform-Spielplatz (Online-Tool zur Visualisierung von CSS-Transformationsfunktionen)