1. Web
  2. CSS
  3. Guides
  4. Transforms
  5. Verwenden von Transformationen

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Verwenden von CSS-Transformationen

Durch die Modifikation des Koordinatenraums verä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 mittels einer Reihe von CSS-Eigenschaften implementiert, die affine lineare Transformationen auf HTML-Elemente anwenden lassen. Diese Transformationen umfassen Drehungen, Schrägstellungen, Skalierungen und Verschiebungen sowohl in der Ebene als auch im 3D-Raum.

Warnung: Nur transformierbare Elemente können transformiert werden; das heißt alle Elemente, deren Layout durch das CSS Box-Modell gesteuert wird, mit Ausnahme von: nicht ersetzten Inline-Boxen, Tabellenspalten-Boxen und Tabellenspalten-Gruppen-Boxen.

CSS-Transformations-Eigenschaften

Zwei Haupteigenschaften 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 im Zentrum des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet, wie Drehungen, Skalierungen oder Schrägstellungen, die einen spezifischen Punkt als Parameter benötigen.

transform

Gibt die auf das Element anzuwendenden Transformationen an. Es ist eine durch Leerzeichen getrennte Liste von Transformationen, die nacheinander angewendet werden, wie es durch die Kompositionsoperation angefordert wird. Zusammengesetzte Transformationen werden effektiv von rechts nach links angewendet.

Beispiele

Hier ist ein unverändertes Bild des MDN-Logos:

[画像:MDN Logo]

Drehung

Hier ist das MDN-Logo um 90 Grad von seiner linken unteren Ecke gedreht.

html
<img src="logo.png" alt="MDN Logo" />
css
img {
 rotate: 90deg;
 transform-origin: bottom left;
}

Schrägstellung und Verschiebung

Hier ist das MDN-Logo, um 10 Grad schräggestellt und um 150 Pixel auf der X-Achse verschoben.

html
<img src="logo.png" alt="MDN logo" />
css
img {
 transform: skewX(10deg) translateX(150px);
 transform-origin: bottom left;
}

3D-spezifische CSS-Eigenschaften

Das Ausführen von CSS-Transformationen im 3D-Raum ist etwas komplexer. Sie müssen zunächst den 3D-Raum konfigurieren, indem Sie ihm eine Perspektive geben, und dann konfigurieren, wie sich Ihre 2D-Elemente in diesem Raum verhalten werden.

Perspektive

Das erste Element, das festgelegt werden muss, ist die perspective. Die Perspektive ist, was uns den 3D-Eindruck vermittelt. Je weiter die Elemente vom Betrachter entfernt sind, desto kleiner erscheinen sie.

Perspektive einstellen

Dieses Beispiel zeigt einen Würfel mit der Perspektive an verschiedenen Positionen. Wie schnell sich der Würfel verkleinert, wird durch die perspective-Eigenschaft definiert. Je kleiner der Wert ist, desto tiefer ist die Perspektive.

HTML

Der untenstehende HTML-Code erstellt vier Kopien derselben Box, mit der Perspektive auf unterschiedliche Werte eingestellt.

html
<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 legt Klassen fest, die verwendet werden können, um die Perspektive auf unterschiedliche Entfernungen einzustellen. Es enthält auch Klassen für die Container-Box und den Würfel selbst sowie jede seiner Seiten.

css
/* 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: lime;
 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 Element, das konfiguriert werden muss, ist die Position des Betrachters, mit der perspective-origin-Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer angemessen ist.

Ursprung der Perspektive ändern

Dieses Beispiel zeigt Würfel mit populären perspective-origin Werten.

HTML
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
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: lime;
 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: #eeeeee;
 padding: 10px;
 font-family: sans-serif;
 text-align: left;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
}
Ergebnis

Sobald Sie dies erledigt haben, können Sie an dem Element im 3D-Raum arbeiten.

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

AltStyle によって変換されたページ (->オリジナル) /