RotateX, rotateY ve rotateZ değerleri

Evet arkadaşlar dönüşüm (transform) konularında sona yaklaşıyoruz yavaş yavaş.  Bu konudan sonra  perspective değerini de anlatıp geçişler (transitions) konusuna geçmeyi düşünüyorum. Aslında beraber anlatmış olsaydım daha iyi olacaktı ama benim asıl amacım neyin nasıl yapıldığını ayrı ayrı göstermekti. En sonda geçişler konusuna da gelince buraya kadar anlattıklarımızın hepsini tek bir seferde örnekler vererek anlatmaya çalışacağım.  Web tasarım merakı yaklaşık 6-7 sene önce sarmıştı beni ve en çok merak ettiğim ise mouse nesnenin üzerine geldiğinde dönmesi olayıydı. Biraz araştırma yaptıktan sonra jQuery rotate isimli bir eklenti ile karşılaşmıştım. Bu tür çalışmalara o zamanlar yeni başladığım için bir hayli zorlanmıştım da. Neyse ki biraz kurcaladıktan sonra istediğim çalışmayı yapabilmiştim. Css3 çıktıktan sonra bu tür eklentiler de pek sarmaz oldu artık. Çünkü rotate özelliğini kullanarak aynı çalışmaları daha kolay ve daha az dosya çağırarak yapabiliyoruz. Bu günkü konumuzda rotate x, y ve z değerlerinin kullanımını öğrenerek başka eklentilere ihtiyaç duymadan kendi tasarımlarımızı hazırlamayı öğreneceğiz.

RotateZ :

Bu değeri eklemiş olduğunuz kutular  belirlediğiniz rakama göre saat yönünde dönerler. Eğer rakamları eksi (-) olarak belirlerseniz saatin tersi yönünde dönme işlemi gerçekleşir. Bu yazıya eklemiş olduğum demolarda tam olarak hareket anlaşılmıyor transitions kullanmadığımdan dolayı. Hareket bir anda olup bitiyor. Css3 transitions konusundan da ayrıca örneği inceleyebilirsiniz.  Aşağıdaki kutulardan soldakini 120 derece ve sağdakini de  10 derece şeklinde  ayarladık. Mouse ile kutuların üzerine geldiğinizde farkı görebilirsiniz. Bu da eksi (-) değeri verilerek saatin tersi yönünde ayarlanmış bir demo. Eğer transitions özelliğini kullanmayacaksanız eksi şeklinde belirlemenize gerek kalmaz. Çünkü transitions ile yavaşça hareket edeceğinden dolayı animasyon şeklinde görünecektir. Aksi halde hangi yöne doğru döndüğü belli olmuyor.

RotateX:

Bir önceki örneğimiz 2B çalışmalar içindi. X ve Y değerleri de 3 boyutlu çalışmalar için kullanılıyor. Elinizdeki bir kartı çevirdiğinizde ortaya çıkan görüntüyü bu değerle yapabilirsiniz. Yalnız işin içine  biraz perspective de katarsanız eğer daha gerçekçi görüntüler ortaya çıkar. Sadece bu değeri kullandığınız zaman uzaklaşan kenarlar küçülmez ve yakınlaşan kenarlarda büyümez. Perspective ile kullanıldığında çaprazlama görüntü ortaya çıkar. Şuradaki dikey menü örneğimizi de aynı şekilde hazırlamıştık sizlere.

RotateY:

X değeri aşağı-yukarı katlama yaparken Y değeri de sağ-sol şeklinde katlama yapar çerçeveleri (div). Sizlere bu konu hakkında vereceğim örnekler bu kadardı ancak X ve Y değerlerinde demoların nasıl çalıştığı tam anlaşılmadığından dolayı transitions ve perspective kullanarak size bir örnek daha göstermek istedim daha açıklayıcı olması açısından. Soldaki kutuya 0,3 milisaniye geçiş özelliği ve 900piksel de pespective değeri verildi. Sağdaki kutu ise normal olarak ayarlanmış.