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.


Ön Taraf
Arka Taraf
Üst Taraf
Alt Taraf
Solt Taraf
Sağ Taraf

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 3d transform

CSS'de,

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

css 3d transform

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:

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.

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.

css 3d transform

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.

Not: Bir perspective öğenin özelliğini tanımlarken , öğenin kendisini DEĞİL, perspektif görünümünü alan ÇOCUK öğeleridir.

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:

backface-visibility: visible | hidden | initial | inherit;

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:

İlk Durum


Sonraki Durum



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.

Note: Perspektifi ayarlamadan bir öğeye 3B dönüştürme uygularsanız, ortaya çıkan efekt üç boyutlu olarak görünmez.

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:

İlk Durum


Sonraki Durum



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:

İlk Durum


Sonraki Durum



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:

İlk Durum


Sonraki Durum



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.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

6810

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML KAYAN YAZI VE Marguee KULLANIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.