transforms

Css3 çıktıktan sonra daha önceleri JavaScript olmadan yapamadığımız birçok özelliği artık daha kolay bir şekilde yapabiliyoruz. Css kullanımı basit olduğundan bu dönüşümler sayesinde artık çok az anlayan kişiler de mükemmel görünümlü web siteleri tasarlayabiliyorlar. Günümüz web tarayıcılarının çoğu bu yeni özellikleri (properties) destekliyor olsalar da hala bir çok kişi eski sürüm bilgisayarlar kullandığından dolayı kusursuz web siteleri hazırlamak pek mümkün olmuyor. Bildiğiniz üzere internet Explorer tarayıcısının adeta dışlarcasına bu yeni özellikleri reddetmesi bir çok tasarımcı için oldukça zor olmuştur. Neyse ki IE9 sürümü ile 2D dönüşümler ve IE10 ile de 3D dönüşümleri de destekleyerek bir nebze olsun web tasarım işi ile uğraşan kişilere kolaylık sağlamış oldu bu inadından vazgeçerek.

jQuery kütüphanesini duymayan yoktur sanırım. Sırf web tasarımın kolaylaşması ve daha az kod grerek daha çok işlev yerine getirilebilmesi amacıyla John Resig tarafından geliştirilmiş ve binlerce eklentisi olan bir JavaScript kütüphanesidir. Css3 çıkmasıyla birlikte biraz jQuery kütüphanesine olan ihtiyacımız da azaldı sayılır. Henüz tam anlamıyla yeterli olmasa da Css4 veya Css5 sürümlerinden sonra çoğu uygulmayı hazırlamak için jQuery kütüphanesine ihtiyaç bile duymayabiliriz.

Css3 transform (dönüşümler) ve kullanımları.

Yeni konu olduğu için ilk önce harita niyetine anlatmam gereken bölümleri tek tek altta listeyerek açıklamalarını yanlarına yaptım. Her gün bir kaç tane değerin anlatımını yaparak kullanım sayfasına linkler ekleyeceğim. Eğer çok erken bu yazıyı okumuşsanız çoğu konu veya hiç birine bağlantı eklenmemiş olabilir.

Tanımlar : 

  • X : Sağdan sola, soldan sağa
  • Y : Aşağıdan yukarıya yukarıdan aşağıya
  • Z : Kendi ekseninde döndürme veya büyütme-küçültme

Değerler :

Translate:

  • translate(x,y) : Margin değeri  gibi görünebilir ve hemen hemen aynı görevi görür. Sağ-sol ve aşağı-yukarı kaydırmalarda kullanılır.
  • translate3d(x,y,z) : 3B tasarımlarda ileri-geri, sağ-sol veya aşağı-yukarı kaydırma içindir.
  • translateX(x) : Sadece sağ-sol kaydırma.
  • translateY(y) : Sadece aşağı-yukarı kaydırma.
  • translateZ(z) : İleri-geri

Scale:

  • scale(x,y) : Sağ-sol, aşağı-yukarı büyütme.
  • scale3d(x,y,z) : Sağ-sol, aşağı-yukarı ve 3B (ileri-geri) büyütme.
  • scaleX(x) : Sağ-sol büyütme.
  • scaleY(y) : Aşağı-yukarı büyütme.
  • scaleZ(z) : İleri-geri büyütme.

Rotate:

  • rotateX(angle) : Sağ-sol döndürme açısı.
  • rotateY(angle) : Aşağı-yukarı döndürme açısı.
  • rotateZ(angle) : Saat yönünde döndürme.

Skew:

  • skew(x-angle,y-angle) : Sağ-sol, aşağı-yukarı 2B bakış açısı ayarlama.
  • skewX(angle) : Sağ-sol 2B bakış açısı ayarlama.
  • skewY(angle) : Aşağı-yukarı 2B bakış açısı ayarlama.

perspective(n) : 3B görüntü elde etmek için işe yarayan en önemli değerdir bana göre.

 

Bunlar dışında bir de matrix değerleri de bulunuyor. Sanırım matrix konusuna girmemek en iyisi. Bir yerin koordinatını girer gibi uzunca rakamlar yazmak gerekiyor. Daha kısa kodlar ile daha çok işlev yapabiliyor olsa da uzunca rakamları yazmamak en iyisi diye düşünüyorum.  Yine de öğrenmek istiyorsanız Css3 3B veya 2B matrix diye arama yaparsanız gerekli sonuçlara ulaşabilirsiniz.

 

Css3 2D transform destekleyen tarayıcılar:

Özellik Internet Explorer Chome  Mozilla  Safari  Opera
transform 10.0
9.0 -ms-
12.0 -webkit- 16.0
3.5 -moz-
3.1 -webkit- 15.0 -webkit-
12.1
10.5 -o-
transform-origin 10.0
9.0 -ms-
12.0 -webkit- 16.0
3.5 -moz-
3.1 -webkit- 15.0 -webkit-
12.1
10.5 -o-

 


 Css3 3D transform destekleyen tarayıcılar

Özellik Internet Explorer  Google Chrome Mozilla Firefox  Apple Safari Opera
transform 10.0 12.0 -webkit- 16.0
10.0 -moz-
4.0 -webkit- 15.0 -webkit-
transform-origin
(three-value syntax)
10.0 12.0 -webkit- 16.0
10.0 -moz-
4.0 -webkit- 15.0 -webkit-
transform-style Desteklenmiyor 12.0 -webkit- 16.0
10.0 -moz-
4.0 -webkit- 15.0 -webkit-
perspective 10.0 12.0 -webkit- 16.0
10.0 -moz-
4.0 -webkit- 15.0 -webkit-
perspective-origin 10.0 12.0 -webkit- 16.0
10.0 -moz-
4.0 -webkit- 15.0 -webkit-
backface-visibility 10.0 12.0 -webkit- 16.0
10.0 -moz-
4.0 -webkit- 15.0 -webkit-


Ali senin düşüncelerini merak ediyor. Bir yorum yaz