Articles
Introductie tot CSS
CSS-eigenschappen met betrekking tot 3D-animatie

CSS-eigenschappen met betrekking tot 3D-animatie

Dit artikel legt CSS-eigenschappen uit die betrekking hebben op 3D-animaties.

We leggen uit hoe 3D-animaties werken in CSS en hoe je ze kunt gebruiken met echte codevoorbeelden. Je leert in de praktijk hoe je 3D-transformaties toepast met behulp van de eigenschap transform en hoe je diepte en een driedimensionaal effect toevoegt met perspective en transform-style.

YouTube Video

HTML voor Voorbeeldweergave

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-animaties en overgangen

Moderne webbrowsers stellen je in staat om driedimensionale 3D-animaties te maken met alleen CSS. Omdat je lichte en visueel aantrekkelijke interacties kunt creëren zonder JavaScript te gebruiken, draagt dit bij aan een verbeterde UI/UX.

Hoe 3D-animatie werkt

CSS 3D-animaties maken vooral gebruik van de volgende eigenschappen:.

  • De eigenschap transform verandert de positie, rotatie en schaal van elementen.
  • De eigenschap perspective stelt de kijkafstand in om 3D-diepte uit te drukken.
  • De eigenschap transform-style geeft aan of kindelementen in 3D-ruimte moeten worden getransformeerd.
  • De eigenschap backface-visibility regelt de zichtbaarheid van de achterzijde van elementen.
  • De eigenschappen animation en transition worden gebruikt om animaties te definiëren.

@keyframes en 3D-animaties

Rotatie rond de Y-as

Laten we beginnen met het definiëren van een 3D-animatie die een element rond de Y-as laat roteren met behulp van @keyframes.

 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}
  • De animatie rotateY3D roteert het element 360 graden rond de Y-as.
  • De eigenschap transform-style is ingesteld op preserve-3d om de 3D-transformaties van kindelementen te behouden.
  • De eigenschap perspective stelt de kijkafstand in om het gevoel van diepte aan te passen. Hier wordt 800px ingesteld.

Rotatie rond de X-as

Laten we ook een 3D-animatie definiëren die een element rond de X-as laat roteren.

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}
  • De animatie rotateX3D roteert het element 360 graden rond de X-as.

Rotatie rond zowel de X-as als de Y-as

Laten we een 3D-animatie definiëren die rotaties rond zowel de X- als Y-as combineert.

 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}
  • Roteren rond meerdere assen zorgt voor een sterker 3D-effect.

Het omdraaien van de voor- en achterkant van een 3D-kaart

Laten we een hover-animatie-effect definiëren dat de voor- en achterkant van een 3D-kaart omdraait.

 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}
  • Door de eigenschap backface-visibility op hidden te zetten, voorkom je dat de achterkant aan de voorkant zichtbaar wordt.
  • Door rotateY(180deg) toe te passen op de .card-back-klasse creëer je de achterkant van de kaart.
  • Door rotateY(180deg) toe te passen bij hover draait de kaart om.

3D-animatie van een kubus

Laten we een 3D-animatie definiëren voor een kubus. Elk vlak van de kubus wordt zichtbaar tijdens het draaien, waardoor het 3D-effect wordt benadrukt via hover of automatische animatie.

 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}
  • De klasse .cube wordt in 3D weergegeven omdat de eigenschap transform-style is ingesteld op preserve-3d.
  • Elk vlak van de kubus wordt naar voren verplaatst vanuit het midden van de kubus met behulp van translateZ(100px), waardoor een 3D-kubus ontstaat.
  • De animatie rotateCube roteert de kubus automatisch door de Y- en X-as te combineren.

Het standpunt verandert met perspective

Door de waarde van perspective te verlagen, komt het standpunt dichter bij het element, waardoor de diepte wordt benadrukt en het 3D-effect wordt versterkt. Als je de waarde juist verhoogt, komt het standpunt verder van het element af te staan, wat zorgt voor een natuurlijker en subtieler 3D-effect. Laten we hier de eigenschap perspective veranderen van 800px naar 200px om de 3D-animatie van de kubus weer te geven.

1.scene {
2  perspective: 200px;
3}
  • Door de eigenschap perspective te veranderen van 800px naar 200px, wordt het standpunt dichterbij en wordt de diepte meer benadrukt.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS-eigenschappen met betrekking tot animatie