CSS 3D Transforms KULLANIMI

CSS3 3D dönüştürme özelliği, üç boyutlu bir uzayda elemanlar üzerinde hareket ettirme, döndürme, ölçekleme ve eğriltme gibi temel dönüştürme işlemlerini gerçekleştirebilirsiniz.

3B dönüştürme işlevleri, üç eksen boyunca dönüşümleri uygulamanıza izin verir: Üç boyutlu Kartezyen koordinat sisteminin görüntüsü aşağıda gösterildiği gibi, x , y ve z eksenleri.

CSS'de,

• x Eksen yatayı temsil eder (sol ve sağ)
• y Eksen (yukarı ve aşağı) dikeyi temsil eder.
• z Eksen derinliğinin (ileri ve geri / daha yakın ve daha fazla) temsil eder.

Aşağıdaki resim, bu koordinatların CSS'ye nasıl çevrildiğini göstermektedir:

2B dönüşümler için öğrendiğiniz tüm yöntemler 3B geçişler için de geçerlidir, ancak bunların farklı adları vardır. Aşağıdaki tabloya göz atın.

2D Transformation methods	3D Trasformation methods
translate(x,y)	translate3d(x,y,z)
scale(x,y)	scale3d(x,y,z)
rotate(açı)	rotate3d(x,y,z,açı)

Her zamanki 2D yöntemlerin dışında, CSS3 bize aşağıdaki fonksiyonları sağlar:

• translateZ (Z)
• scaleZ (Z)
• rotateZ (Z)

Ve yeni bir özellik backface-visibility

Bir web tasarımcısı olarak, öğeleri yatay ve dikey olarak konumlandıran X ve Y olmak üzere iki boyutta çalışmayı iyi biliyorsunuzdur. Perspektif ile başlatılan bir 3B alanla, artık üçüncü Z boyutu ile üç uzamsal boyuttaki elemanları dönüştürebiliriz. 3B dönüştürmeler, 2B dönüştürmeler için kullanılanla aynı dönüştürme özelliğini kullanır. 2B dönüşümleri biliyorsanız, temel 3B dönüşüm fonksiyonlarına benzer bulacaksınız.

• rotateX(açı)
• rotateY(açı)
• rotateZ(açı)
• translateZ(tz)
• scaleZ(sz)

TranslateX() bir öğeyi yatay X ekseni boyunca konumlandırırken, translateZ() onu 3B alanda önden, arkaya Z ekseni boyunca konumlandırır. Pozitif değerler, öğeyi izleyiciye daha yakın konumlandırır, negatif değerler daha uzağa yerleştirilir.

Döndürme fonksiyonları, öğeyi ilgili eksen etrafında döndürür. Bu, rotateX() öğesinin bir nesneyi yatay olarak sola veya sağa döndüreceğini tahmin edebileceğiniz gibi, ilk başta biraz sezgiseldir. Bunun yerine, rotateX() öğesini kullanmak bir öğeyi yatay X ekseni etrafında döndürür, böylece öğenin üstü arkaya ve öne, alt açıları da yakın olur.

perspective

Perspective özelliği elemanların görüntüsünün bakış açısını değiştirmek(derinlik hissi) için kullanılır.

Perspektif, nesnelerin görünümünü 3 boyutlu olarak düz bir yüzeyde, yani 2 boyuta indirgeyerek, göstermeye yarayan bir iz düşüm tekniğidir. Yani, teknik bir çizimdir. Perspektif çizimde, nesnenin gözlemciye göre olan pozisyonunun ve uzaklığının etkileri esas alınarak çizim yapılır. Söz konusu çizimler gözlemcide, biçim ve orantı bakımından, renklerden bağımsız olarak, 3 boyutlu bir gerçeklik izlenimi yaratır. - wikipedia.org

Bu özellik, bir 3B öğenin görünümden yerleştirildiği piksel sayısını tanımlar. Bu özellik, 3B öğelerin nasıl görüntülendiğine ilişkin perspektifi değiştirmenize olanak tanır.

Bu fonksiyon yalnızca 3B dönüştürmeler için kullanılabilir.

div {
    perspective: 250px;
   }

backface-visibility

Arka yüzün gözüküp gözükmeyeceği bu özellik sayesinde belirlenir. Bu özellik, bir öğe döndürüldüğünde yararlıdır ve öğenin arka tarafını görmek istemeyebilirsiniz.

Sözdizimi:

div {
    backface-visibility: hidden;
   }

2D dönüşümler için geçerli olan tüm özellikler (skew) 3D dönüşümler için de geçerlidir.

translate3d() Fonksiyon

Öğeyi x ekseni, y ekseni ve z ekseni kullanarak dönüştürmek için kullanılır

CSS:

.container {
    width: 125px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
}
.transformed {
    
    transform: translate3d(25px, 25px, 50px);
}

HTML:

 <h4>İlk Durum</h4>
    <div class="container">
      	<img src="/examples/kare.jpg"/>
    </div>
    <h4>Sonraki Durum</h4>
  	<div class="container">
        <img src="/examples/kare.jpg" class="transformed"/>
    </div>   	

ÇIKTI:

Bununla birlikte, 3D dönüşümü üç boyutlu koordinat sistemini kullanır, ancak Z-yönü boyunca hareket her zaman fark edilmez çünkü elemanlar iki boyutlu bir düzlemde (düz bir yüzey) bulunur ve derinliği yoktur.

Perspektif ve perspektif kaynaklı CSS özellikleri, Z ekseni üzerindeki öğelerin daha yüksek, yani görüntüleyiciye daha yakın olan öğelerin daha büyük görünmesini ve görüntüleyiciden daha uzakta olan öğelerin daha küçük görünmesini sağlayarak bir sahneye derinlik hissi eklemek için kullanılabilir.

rotate3d() Fonksiyon

Öğe, fonksiyonun dördüncü parametresi olarak iletilen bir açı ile döndürülür. İlk üç parametre dönüş yönünü belirtir ve birlikte dönüşü belirtilen yönde uygulamak için kullanılan bir yön vektörü [x, y, z] oluştururlar.

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    transform: rotate3d(0, 1, 0, 60deg);
}

Fonksiyon rotate3d(0, 1, 0, 60deg) görüntüyü Y ekseni boyunca 60 derece açıyla döndürür. Elemanı ters yönde döndürmek için negatif değerler kullanabilirsiniz.

scale3d() Fonksiyon

X, y ve z yönlerinin her birinde belirli ölçeklendirme faktörleri ayarlayarak öğenin ölçeğini değiştirmek için üç boyutlu bir dönüşüm tanımlar. Üç parametrenin de belirtilmesi gerekir.

container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #6486ab;
    background: #e9eef3;
}
.transformed {
    transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);
}

scale3d(1, 1, 2), öğeleri Z ekseni boyunca ölçekler ve fonksiyon rotate3d(1, 0, 0, 60deg), görüntüyü X ekseni boyunca 60 derece açıyla döndürür.

ÇIKTI:

translate3d (x, y, z)

Öğeyi x ekseni, y ekseni ve z ekseni kullanarak dönüştürmek için kullanılır.

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #d14e46;
    background: #fddddb;
}
.transformed {
    transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

ÇIKTI:

Bununla birlikte, aynı anda birden fazla dönüşüm gerçekleştirirken, bağımsız dönüşüm fonksiyonu kullanmak ve bunları sırasıyla listelemek daha uygundur:

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2);
}

ÇIKTI:

3D Dönüştürme Fonksiyonları

Aşağıdaki tabloda tüm 3B dönüştürme fonksiyonları kısa bir genel bakış sunulmaktadır.

Fonksiyon	Açıklama
translate3d(tx,ty,tz)	Öğeyi X, Y ve Z ekseni boyunca verilen miktara göre hareket ettirir..
translateX(tx)	Öğeyi X ekseni boyunca verilen miktara göre hareket ettirir..
translateY(ty)	Öğeyi verilen miktara göre Y ekseni boyunca hareket ettirir.
translateZ(tz)	Öğeyi z ekseni boyunca verilen miktara göre hareket ettirir.
rotate3d(x,y,z, a)	3B alanda öğeyi [x, y, z] yön vektörünün etrafında son parametrede belirtilen açıya göre döndürür.
rotateX(a)	Elemanı X ekseni çevresinde belirli bir açıyla döndürür.
rotateY(a)	Elemanı Y ekseni çevresinde belirli bir açıyla döndürür.
rotateZ(a)	Elemanı Z ekseni çevresinde belirli bir açıyla döndürür.
scale3d(sx,sy,sz)	Elemanı X, Y ve Z ekseni boyunca belirli bir miktarda ölçeklendirir. Fonksiyonun, scale3d(1,1,1) etkisi yoktur.
scaleX(sx)	Elemanı X ekseni boyunca ölçeklendirir.
scaleY(sy)	Elemanı Y ekseni boyunca ölçeklendirir.
scaleZ(sz)	Elemanı Z ekseni boyunca ölçeklendirir.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	16 değerden oluşan 4×4 dönüşüm matrisi şeklinde 3B dönüşümü belirtir.
perspective(length)	3B dönüştürülmüş bir öğe için perspektif görünümü tanımlar. Genel olarak, bu fonksiyonun değeri arttıkça, öğe görüntüleyiciden daha uzakta görünür.

3220

Gönder