Articles
CSS'e Giriş
3D Animasyonla İlgili CSS Özellikleri

3D Animasyonla İlgili CSS Özellikleri

Bu makale, 3D animasyonlarla ilgili CSS özelliklerini açıklamaktadır.

CSS’de 3D animasyonların nasıl çalıştığını ve gerçek kod örnekleriyle nasıl kullanılacağını açıklayacağız. transform özelliğini kullanarak 3D dönüşümlerin nasıl uygulanacağını ve perspective ile transform-style ile derinlik ve üç boyutlu etki nasıl katılacağını pratik olarak öğreneceksiniz.

YouTube Video

Önizleme için 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>

3D Animasyonlar ve Geçişler

Modern web tarayıcıları, yalnızca CSS kullanarak üç boyutlu 3D animasyonlar oluşturmanıza imkan tanır. JavaScript kullanmadan hafif ve görsel olarak çekici etkileşimler oluşturabileceğiniz için, bu durum daha iyi bir UI/UX'e katkıda bulunur.

3D Animasyon Nasıl Çalışır

CSS 3D animasyonlar, genellikle aşağıdaki özellikleri kullanır:.

  • transform özelliği, öğelerin konumunu, dönüşünü ve ölçeğini değiştirir.
  • perspective özelliği, 3D derinliği ifade etmek için bakış noktası mesafesini ayarlar.
  • transform-style özelliği, alt öğelerin 3D uzayda dönüştürülüp dönüştürülmeyeceğini belirtir.
  • backface-visibility özelliği, öğelerin arka yüzünün görünürlüğünü kontrol eder.
  • animation ve transition özellikleri, animasyonları tanımlamak için kullanılır.

@keyframes ve 3D Animasyonlar

Y Ekseni Etrafında Dönme

@keyframes kullanarak bir öğeyi Y ekseni etrafında döndüren bir 3D animasyon tanımlayarak başlayalım.

 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 animasyonu, öğeyi Y ekseni etrafında 360 derece döndürür.
  • Çocuk öğelerin 3D dönüşümlerinin korunması için transform-style özelliği preserve-3d olarak ayarlanır.
  • perspective özelliği, derinlik hissini ayarlamak için bakış noktası mesafesini belirler. Burada, 800px olarak ayarlanmıştır.

X Ekseni Etrafında Dönme

Şimdi de bir öğeyi X ekseni etrafında döndüren bir 3D animasyon tanımlayalım.

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 animasyonu, öğeyi X ekseni etrafında 360 derece döndürür.

Hem X Hem de Y Ekseni Etrafında Dönme

X ve Y eksenlerinde döndürmeleri birleştiren bir 3D animasyon tanımlayalım.

 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}
  • Birden fazla eksende döndürme, daha güçlü bir 3D etkisi oluşturur.

Bir 3D kartın ön ve arkasını çevirme

Bir 3D kartın ön ve arkasını çeviren bir hover animasyon efekti tanımlayalım.

 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 özelliğini hidden olarak ayarlayarak, arka yüzün önde görünmesi engellenir.
  • .card-back sınıfına rotateY(180deg) uygulanarak kartın arka yüzü oluşturulur.
  • Hover durumunda rotateY(180deg) uygulamak kartı çevirir.

Küp 3D Animasyonu

Bir küp için 3D animasyon tanımlayalım. Küpün her bir yüzü dönerken görünür ve 3D etkisi, hover veya otomatik animasyon ile aktarılır.

 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 sınıfı, transform-style özelliği preserve-3d olarak ayarlandığı için 3D olarak görünür.
  • Küpün her yüzü translateZ(100px) ile merkezin önüne taşınır ve böylece 3D bir küp oluşur.
  • rotateCube animasyonu, Y ve X eksenlerinin birleştirilmesiyle küpü otomatik olarak döndürür.

Bakış açısı perspective ile değişir

perspective değerini azaltmak, bakış noktasını öğeye yaklaştırır, derinlik vurgulanır ve 3D etki artar. Aksine, değeri artırmak bakış noktasını daha uzaklaştırır ve daha doğal, hafif bir 3D görünüm elde edilir. Burada, küpün 3D animasyonunu göstermek için perspective özelliğini 800px'den 200px'e değiştirelim.

1.scene {
2  perspective: 200px;
3}
  • perspective özelliğini 800px'den 200px'e değiştirerek bakış noktası daha yakın olur ve derinlik daha fazla vurgulanır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Animasyonla İlgili CSS ÖzellikleriKullanıcı Arayüzü ile İlgili CSS Özellikleri