Articles
מבוא ל-CSS
מאפייני CSS הקשורים לאנימציה בתלת-ממד

מאפייני CSS הקשורים לאנימציה בתלת-ממד

מאמר זה מסביר את מאפייני ה-CSS הקשורים לאנימציות תלת-ממדיות.

נסביר כיצד פועלות אנימציות תלת-ממד ב-CSS וכיצד להשתמש בהן עם דוגמאות קוד אמיתיות. תלמדו בפועל כיצד להחיל טרנספורמציות תלת-ממד בעזרת המאפיין transform וכיצד להוסיף עומק ואפקט תלת-ממדי באמצעות perspective ו-transform-style.

YouTube Video

HTML לתצוגה מקדימה

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>

אנימציות ותעברים בתלת-ממד

דפדפני אינטרנט מודרניים מאפשרים ליצור אנימציות תלת-ממדיות באמצעות CSS בלבד. מכיוון שניתן ליצור אינטראקציות קלות ונראות אסתטיות ללא שימוש ב-JavaScript, זה תורם לשיפור חוויית המשתמש וממשק המשתמש.

איך עובדת אנימציה תלת-ממדית

אנימציות תלת-ממד ב-CSS עושות בעיקר שימוש במאפיינים הבאים:.

  • המאפיין transform משנה את המיקום, הסיבוב והגודל של האלמנטים.
  • המאפיין perspective קובע את מרחק נקודת המבט כדי ליצור תחושת עומק תלת-ממדי.
  • המאפיין transform-style קובע אם אלמנטים-צאצאים יעברו טרנספורמציה במרחב תלת-ממדי.
  • המאפיין backface-visibility שולט אם הצד האחורי של האלמנטים יראה או יוסתר.
  • המאפיינים animation ו-transition משמשים להגדרת אנימציות.

@keyframes ואנימציות תלת-ממד

סיבוב סביב ציר ה-Y

נתחיל בהגדרת אנימציה תלת-ממדית שמסובבת אלמנט סביב ציר ה-Y באמצעות @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}
  • האנימציה rotateY3D מסובבת את האלמנט 360 מעלות סביב ציר ה-Y.
  • המאפיין transform-style מוגדר ל-preserve-3d כדי לשמר טרנספורמציות תלת-ממד של אלמנטים-צאצאים.
  • המאפיין perspective קובע את מרחק נקודת המבט כדי להתאים את תחושת העומק. כאן מוגדר ערך של 800px.

סיבוב סביב ציר ה-X

נגדיר גם אנימציה תלת-ממדית שמסובבת אלמנט סביב ציר ה-X.

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}
  • האנימציה rotateX3D מסובבת את האלמנט 360 מעלות סביב ציר ה-X.

סיבוב סביב שני הצירים X ו-Y

נגדיר אנימציה תלת-ממדית שמשלבת סיבוב סביב צירי X ו-Y.

 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}
  • סיבוב סביב מספר צירים מגביר את האפקט התלת-ממדי.

היפוך צד קדמי ואחורי של כרטיס בתלת-ממד

נגדיר אפקט אנימציה ב-hover שהופך את הצד הקדמי והאחורי של כרטיס תלת-ממדי.

 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}
  • על ידי הגדרת המאפיין backface-visibility ל-hidden, נמנע מהצד האחורי להופיע בחזית.
  • החלת rotateY(180deg) על מחלקת .card-back יוצרת את הצד האחורי של הכרטיס.
  • החלת rotateY(180deg) בעת ריחוף (hover) הופכת את הכרטיס.

אנימציית קובייה בתלת-ממד

נגדיר אנימציה תלת-ממדית עבור קובייה. כל פאה של הקובייה מופיעה תוך כדי סיבוב, וממחישה את האפקט התלת-ממדי דרך ריחוף (hover) או אנימציה אוטומטית.

 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}
  • המחלקה .cube מוצגת בתלת-ממד מכיוון שהמאפיין transform-style שלה מוגדר ל-preserve-3d.
  • כל פאה של הקובייה מוזזת החוצה ממרכז הקובייה בעזרת translateZ(100px), כך שנוצרת קובייה תלת-ממדית.
  • האנימציה rotateCube מסובבת את הקובייה אוטומטית על ידי שילוב צירי Y ו-X.

שינוי נקודת המבט בעזרת perspective

הפחתת ערך ה-perspective מקרבת את נקודת המבט לאלמנט, מחזקת את העומק ומדגישה את האפקט התלת-ממדי. להפך, הגדלת הערך מרחיקה את נקודת המבט, כך שהאפקט התלת-ממדי הופך טבעי ועדין יותר. כאן נשנה את המאפיין perspective מ-800px ל-200px כדי להציג את אנימציית הקובייה בתלת-ממד.

1.scene {
2  perspective: 200px;
3}
  • על ידי שינוי המאפיין perspective מ-800px ל-200px, נקודת המבט מתקרבת והעומק מודגש יותר.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות לאנימציות