3d kup.png-3D Dönen Küp Animasyon Efekti-cahitsoyman.blogspot.com

Bu makalemizde Css3 kullanarak 3D küp rotasyon efektinin nasıl yapıldığını anlatmaya çalışacağım.(jquery kullanmadan)

Kodlamaya geçmeden önce 3D oluşumu ile ilgili kısaca bilgi vermek istiyorum. 

3D küp Css3 perspektifi (prespective) kullanılarak oluşturulur. Diğer bir deyişle, yatay ve dikey (x,y) boyuta, derinlik (z) boyutu da dahil edilerek transform (dönüşüm) özelliği verilerek  yatay, dikey ve derinlik yönünde döndürülebilir.  Bunu Css3 ün transform özelliği veya perspective fonksiyonunu kullanarak yapabiliriz.


transform: perspective( 400px );

 veya perspective fonksiyonu ile;


 
perspective( 400px );

 Burada şu hususu da belirtmekte fayda var. Perspective değeri ne kadar büyük  olursa; izleyiciden nesneye mesafe o kadar uzak olur, perspective değeri ne kadar küçük olursa mesafe o kadar yakın olur. 
Prespective özelliği, elemanların görüntüsünü 3 boyutlu olarak düz bir yüzeyde  derinlik hissi vermek için kullanılır.


z-ekseni bize 3. boyutu göstermektedir.

Css3 de temel 3D  dönüşüm fonksiyonları aşağıda ki gibidir:

  • perspective
  • translateX, translateY, translateZ, translate3d
  • matrix3d
  • rotateX, rotateY, rotateZ, rotate3d
  • scaleX, scaleY, scaleZ, scale3d

Scale (ölçek) özelliği ise, elemanları büyütmek ve küçültmek için kullanılmaktadır.

Şimdi kodlarımızı yazmaya başlayalım. Önce 3d alanımızı içine alacak bir kapsayıcı oluşturalım. 


<Prespective-origin>

Prespective özelliği ile kullanılır, elemanın görüntülenen bakış açısının orijin noktasını değiştirmeyi sağlar. Başlangıç değeri kapsayıcının orta noktasıdır.
x-değeri sol(left), sağ(right) ve orta(center) değerlerini alır. y-değeri üst(top), alt(bottom) ve orta(center) değerleri alır. Yüzde değerleri de alır. 
Transform-origin dönüşümün origin olarak nereye referans alacağını tanımlamak içindir. 
                            perspective-origin: -170%;                               
perspective-origin: bottom right;
  
transform-origin: x,y,z;

 z tanımı z-ekseninde ki mesafeyi belirtmek için kullanılır.

translateX, translateY, translateZ ve translate3d

Elemanı x,y,z-ekseninde hareket ettirmeye yarar. 

 
transform: translateZ(uzunluk);

 translate3d tanımı ise 3 ekseninde aynı anda tanımını sağlar. 

translate3d (x, y, z)

 rotateX, rotateY, rotateZ ve rotated3d

3 boyutlu düzlemde döndürme işlemi için tanınlanmıştır. 
rotate3d özelliği 3 boyutlu döndürme işlemi yapar.

 
rotate3d:(<rakam>,<rakam>,<rakam>,<açı>);

 scalex, scaley, scalez ve scale3d
scale özelliği elemanları büyütme ve küçültme için kullanılır. 

 
transform: scaleZ(number);

 scale3d özelliği ise 3 ekseninde aynı anda tanımını sağlar. 

Bu ön açıklamalardan sonra kodlarımızı yazmaya başlayabiliriz. 


 Kaynak Kodları:İNDİR


Anlatımı aşağıdaki videodan veya YouTube linkinden görsel olarak izleyebilirsiniz.