Articles
Einführung in CSS
CSS-Eigenschaften im Zusammenhang mit 3D-Animationen

CSS-Eigenschaften im Zusammenhang mit 3D-Animationen

Dieser Artikel erklärt CSS-Eigenschaften im Zusammenhang mit 3D-Animationen.

Wir erklären, wie 3D-Animationen mit CSS funktionieren und wie Sie sie anhand echter Codebeispiele verwenden können. Sie lernen in der Praxis, wie Sie mit der Eigenschaft transform 3D-Transformationen anwenden und mit perspective und transform-style Tiefe und einen dreidimensionalen Effekt hinzufügen.

YouTube Video

HTML zur Vorschau

css-animation-3d.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS 3D Animation</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-animation-3d.css">
  9</head>
 10<body>
 11    <header>
 12        <h1>CSS Properties For 3D Animation</h1>
 13    </header>
 14    <main>
 15        <header>
 16            <h2>3D Animation Related Properties</h2>
 17        </header>
 18
 19        <!-- 3D Keyframes Section -->
 20        <article>
 21            <h3>@keyframes with 3D Effects</h3>
 22            <section>
 23                <header><h4>animation: rotateY3D 4s linear infinite</h4></header>
 24                <section class="sample-view">
 25                    <section class="sample-view-3d">
 26                        <div class="box-animation-rotateY">Rotate Y</div>
 27                    </section>
 28                </section>
 29                <header><h4>animation: rotateX3D 4s linear infinite</h4></header>
 30                <section class="sample-view">
 31                    <section class="sample-view-3d">
 32                        <div class="box-animation-rotateX">Rotate X</div>
 33                    </section>
 34                </section>
 35                <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
 36                <section class="sample-view">
 37                    <section class="sample-view-3d">
 38                        <div class="box-animation-cube">Spinning Cube</div>
 39                    </section>
 40                </section>
 41            </section>
 42        </article>
 43
 44        <article>
 45            <h3>Hover to Flip the Card</h3>
 46            <section>
 47                <header><h4>HTML</h4></header>
 48<pre>
 49&lt;div class=&quot;card-container&quot;&gt;
 50    &lt;div class=&quot;card&quot;&gt;
 51        &lt;div class=&quot;card-face card-front&quot;&gt;
 52        &lt;h3&gt;Front&lt;/h3&gt;
 53        &lt;p&gt;This is the front side&lt;/p&gt;
 54        &lt;/div&gt;
 55        &lt;div class=&quot;card-face card-back&quot;&gt;
 56        &lt;h3&gt;Back&lt;/h3&gt;
 57        &lt;p&gt;This is the back side&lt;/p&gt;
 58        &lt;/div&gt;
 59    &lt;/div&gt;
 60&lt;/div&gt;
 61</pre>
 62            </section>
 63            <section class="sample-view" style="height: 270px;">
 64                <section class="sample-view-3d-card">
 65                    <div class="card-container">
 66                        <div class="card">
 67                            <div class="card-face card-front">
 68                            <h3>Front</h3>
 69                            <p>This is the front side</p>
 70                            </div>
 71                            <div class="card-face card-back">
 72                            <h3>Back</h3>
 73                            <p>This is the back side</p>
 74                            </div>
 75                        </div>
 76                    </div>
 77                </section>
 78            </section>
 79        </article>
 80
 81        <article>
 82            <h3>3D Animation Cube Example</h3>
 83            <section>
 84                <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
 85                <section class="sample-view" style="height: 300px;">
 86                    <div class="scene">
 87                        <div class="cube">
 88                            <div class="face front">Front</div>
 89                            <div class="face back">Back</div>
 90                            <div class="face left">Left</div>
 91                            <div class="face right">Right</div>
 92                            <div class="face top">Top</div>
 93                            <div class="face bottom">Bottom</div>
 94                        </div>
 95                    </div>
 96                </section>
 97            </section>
 98        </article>
 99    </main>
100</body>
101</html>

3D-Animationen und Übergänge

Moderne Webbrowser ermöglichen es Ihnen, dreidimensionale 3D-Animationen nur mit CSS zu erstellen. Da Sie leichte und optisch ansprechende Interaktionen ohne JavaScript erstellen können, trägt dies zu einer verbesserten UI/UX bei.

Wie 3D-Animationen funktionieren

CSS-3D-Animationen verwenden hauptsächlich die folgenden Eigenschaften:.

  • Die Eigenschaft transform ändert die Position, Drehung und Skalierung von Elementen.
  • Die Eigenschaft perspective legt den Abstand des Standpunkts fest, um 3D-Tiefe darzustellen.
  • Die Eigenschaft transform-style gibt an, ob Kindelemente im 3D-Raum transformiert werden sollen.
  • Die Eigenschaft backface-visibility steuert die Sichtbarkeit der Rückseite von Elementen.
  • Die Eigenschaften animation und transition werden zur Definition von Animationen verwendet.

@keyframes und 3D-Animationen

Rotation um die Y-Achse

Beginnen wir damit, eine 3D-Animation zu definieren, die ein Element mit @keyframes um die Y-Achse dreht.

 1.sample-view-3d {
 2    width: 100px;
 3    height: 100px;
 4    margin: 1rem auto;
 5    perspective: 800px;
 6}
 7
 8.box-animation-rotateY,
 9.box-animation-rotateX,
10.box-animation-cube {
11    width: 100%;
12    height: 100%;
13    background: linear-gradient(45deg, #4facfe, #00f2fe);
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    color: white;
18    font-size: 1.1rem;
19    border-radius: 10px;
20    transform-style: preserve-3d;
21}
22
23/* RotateY animation */
24@keyframes rotateY3D {
25    from { transform: rotateY(0deg); }
26    to { transform: rotateY(360deg); }
27}
28
29.box-animation-rotateY {
30    animation: rotateY3D 4s linear infinite;
31}
  • Die Animation rotateY3D dreht das Element 360 Grad um die Y-Achse.
  • Die Eigenschaft transform-style wird auf preserve-3d gesetzt, um die 3D-Transformationen von Kindelementen beizubehalten.
  • Die Eigenschaft perspective legt den Abstand des Standpunkts fest, um das Gefühl von Tiefe anzupassen. Hier wird 800px gesetzt.

Rotation um die X-Achse

Lassen Sie uns auch eine 3D-Animation definieren, die ein Element um die X-Achse dreht.

1/* RotateX animation */
2@keyframes rotateX3D {
3    from { transform: rotateX(0deg); }
4    to { transform: rotateX(360deg); }
5}
6
7.box-animation-rotateX {
8    animation: rotateX3D 4s linear infinite;
9}
  • Die Animation rotateX3D dreht das Element 360 Grad um die X-Achse.

Rotation um sowohl die X- als auch die Y-Achse

Lassen Sie uns eine 3D-Animation definieren, die Drehungen um die X- und Y-Achse kombiniert.

 1/* Cube spin (combination of X and Y rotation) */
 2@keyframes cube-spin {
 3    0%   { transform: rotateX(0deg) rotateY(0deg); }
 4    50%  { transform: rotateX(180deg) rotateY(180deg); }
 5    100% { transform: rotateX(360deg) rotateY(360deg); }
 6}
 7
 8.box-animation-cube {
 9    animation: cube-spin 6s ease-in-out infinite;
10}
  • Das Rotieren um mehrere Achsen erzeugt einen stärkeren 3D-Effekt.

Vorder- und Rückseite einer 3D-Karte umdrehen

Lassen Sie uns einen Hover-Animationseffekt definieren, der die Vorder- und Rückseite einer 3D-Karte dreht.

 1/* 3D perspective wrapper */
 2.sample-view-3d-card {
 3  perspective: 1000px;
 4  width: 300px;
 5  height: 200px;
 6  margin: 2rem auto;
 7}
 8
 9/* Outer card container */
10.card-container {
11  width: 100%;
12  height: 100%;
13  position: relative;
14  perspective: 1000px;
15}
16
17/* The card itself */
18.card {
19  width: 100%;
20  height: 100%;
21  position: relative;
22  transform-style: preserve-3d;
23  transition: transform 0.8s ease;
24}
25
26/* Both faces */
27.card-face {
28  position: absolute;
29  width: 100%;
30  height: 100%;
31  backface-visibility: hidden;
32  border-radius: 12px;
33  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
34  display: flex;
35  flex-direction: column;
36  justify-content: center;
37  align-items: center;
38  font-family: sans-serif;
39  color: white;
40  font-size: 1.1rem;
41  padding: 1rem;
42}
43
44/* Flip the card on hover */
45.card-container:hover .card {
46  transform: rotateY(180deg);
47}
48
49/* Front side style */
50.card-front {
51  background: linear-gradient(135deg, #00c9ff, #92fe9d);
52}
53
54/* Back side style */
55.card-back {
56  background: linear-gradient(135deg, #fc466b, #3f5efb);
57  transform: rotateY(180deg);
58}
  • Durch Setzen der Eigenschaft backface-visibility auf hidden wird verhindert, dass die Rückseite vorne angezeigt wird.
  • Durch Anwenden von rotateY(180deg) auf die Klasse .card-back entsteht die Rückseite der Karte.
  • Durch Anwenden von rotateY(180deg) beim Hover wird die Karte umgedreht.

Würfel-3D-Animation

Lassen Sie uns eine 3D-Animation für einen Würfel definieren. Jede Seite des Würfels erscheint beim Drehen, wobei der 3D-Effekt durch Hover- oder automatische Animation dargestellt wird.

 1.scene {
 2  width: 200px;
 3  height: 200px;
 4  perspective: 800px; /* Viewing distance (the smaller the value, the stronger the depth effect) */
 5  background-color: rgba(255, 255, 255, 0);
 6  border: 0;
 7}
 8
 9.cube {
10  width: 100%;
11  height: 100%;
12  transform-style: preserve-3d;
13  transform: rotateX(0deg) rotateY(0deg);
14  animation: rotateCube 10s infinite linear;
15  position: relative;
16  background-color: rgba(255, 255, 255, 0);
17  border: 0;
18}
19
20.face {
21  position: absolute;
22  width: 200px;
23  height: 200px;
24  background: rgba(0, 128, 255, 0.6);
25  border: 1px solid #fff;
26  display: flex;
27  align-items: center;
28  justify-content: center;
29  font-size: 24px;
30  font-weight: bold;
31}
32
33/* Positioning each face */
34.front  { transform: translateZ(100px); }
35.back   { transform: rotateY(180deg) translateZ(100px); }
36.left   { transform: rotateY(-90deg) translateZ(100px); }
37.right  { transform: rotateY(90deg) translateZ(100px); }
38.top    { transform: rotateX(90deg) translateZ(100px); }
39.bottom { transform: rotateX(-90deg) translateZ(100px); }
40
41/* Rotation animation */
42@keyframes rotateCube {
43  from {
44    transform: rotateX(0deg) rotateY(0deg);
45  }
46  to {
47    transform: rotateX(360deg) rotateY(360deg);
48  }
49}
  • Die Klasse .cube wird in 3D angezeigt, da ihre Eigenschaft transform-style auf preserve-3d gesetzt ist.
  • Jede Fläche des Würfels wird mit translateZ(100px) aus der Mitte des Würfels herausgeschoben, wodurch ein 3D-Würfel entsteht.
  • Die Animation rotateCube dreht den Würfel automatisch, indem sie Y- und X-Achse kombiniert.

Der Sichtpunkt ändert sich mit perspective

Das Verringern des perspective-Wertes bringt den Sichtpunkt näher an das Element, betont die Tiefe und verstärkt den 3D-Effekt. Umgekehrt führt das Erhöhen des Wertes dazu, dass sich der Sichtpunkt weiter entfernt, wodurch der 3D-Effekt natürlicher und subtiler wirkt. Hier ändern wir die Eigenschaft perspective von 800px auf 200px, um die 3D-Animation des Würfels anzuzeigen.

1.scene {
2  perspective: 200px;
3}
  • Durch das Ändern der Eigenschaft perspective von 800px auf 200px wird der Sichtpunkt näher und die Tiefe stärker betont.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Animationen-bezogene CSS-Eigenschaften