CSS 2D Transforms KULLANIMI

CSS3 2D dönüştürme özelliği ile iki boyutlu bir uzayda elemanlar üzerinde hareket ettirme, döndürme, ölçekleme ve eğriltme gibi temel dönüştürme işlemlerini yapabilirsiniz.

Dönüştürülmüş bir eleman çevredeki elemanları etkilemez, ancak tıpkı kesinlikle konumlandırılmış elemanlar gibi üst üste gelebilir. Ancak, dönüştürülen öğe hala düzende varsayılan (dönüştürülmemiş) konumda yer tutar.

CSS Transform özelliği öğeleri görsel olarak kontrol eder ve öğeleri ölçeklendirmenizi, döndürmenizi, eğriltmenizi ve çevirmenizi sağlar.

2D dönüşüm yöntemlerinin listesi aşağıdadır:

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Element
<audio> 36.0 10.0 16.0 9.0 23.0

Translate() Fonksiyonu

CSS transform: translate() özelliği, öğeleri sola veya sağa veya yukarı ve aşağı taşımak içindir. İki değeri kabul eder:

Aşağıdaki örnek, <div> öğesini geçerli konumundan 100 piksel sağa ve 10 piksel aşağı taşır:


div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  }
 div.test {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(100px,10px); 
} 

ÇIKTI:

Normal div
translate(100px,10px)

Rotate() Fonksiyonu

CSS rotate() methodu, bir öğeyi verilen dereceye göre saat yönünde veya saat yönünün tersine döndürmek için kullanılır. Elemanı saat yönünün tersine döndürmek için negatif değerler kullanabilirsiniz.


div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div.test1 {
  transform: rotate(20deg);
  }

ÇIKTI:

Normal div
rotate(10deg)

Negatif değerlerin kullanılması elemanı saat yönünün tersine döndürür.

Aşağıdaki örnek <div> öğesini 10 derece ile saat yönünün tersine döndürür:


div {
  transform: rotate(-10deg);
}


ÇIKTI:

Normal div
rotate(-10deg)


Scale() Fonksiyonu

CSS scale() methodu, verilen genişlik ve yüksekliğe göre bir öğenin boyutunu artırmak veya azaltmak için kullanılır.

Aşağıdaki örnek, <div> öğesini orijinal genişliğinin iki katı ve orijinal yüksekliğinin 2 katı olacak şekilde artırır:


div {
  width: 50px;
  height: 50px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(3,2);
}

ÇIKTI:


2 kat büyümüş kutu


Aşağıdaki örnek, <div> öğesini orijinal genişliğinin ve yüksekliğinin yarısı olacak şekilde azaltır:


div {
  transform: scale(0.5, 0.5);
}

küçülmüş kutu
Not: scale() fonksiyonu yalnızca 2D ölçekler. 3B olarak ölçeklemek için, scale3d() fonksiyonunu kullanın.

CSS transform: scale, kestirme fonksiyon için scaleX(yatay olarak yeniden boyutlandırılması için) ve scaleY(dikey yeniden boyutlandırılması için).

scaleY() fonksiyonun kullanılmış, elemanın yüksekliği artar veya azalır.


.example {
  background-color: blue;
  height: 100px;
  width: 100px;
  transform: scaleY(3); 
}

Skew() Fonksiyonu

CSS skew() fonksiyonu, verilen açıya göre bir öğeyi X ekseni ve Y ekseni ile birlikte eğriltmek için kullanılır.

Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğriliyor:


div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div.test2 {
  transform: skew(20deg,10deg);
  
}

ÇIKTI:

Normal div
skew(20deg,10deg)


skewX() methodu ile x ekseni yönünde skewY() fonksiyonu ile y ekseni yönünde bükebilirsiniz.


div {
  transform: skewX(20deg);
}

.test {
  transform: skewY(20deg);
}

Matrix() Fonksiyonu

Bu matrix() Methodu, tüm 2B dönüştürme foksiyonları bir araya getirir.

Bu fonksiyon, öğeleri döndürmenizi, ölçeklendirmenizi, çevirmenizi ve eğrilmenizi sağlayan matematik işlevleri içeren altı parametre alır.

Sözdizimi:

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

div:hover {
   width: 200px;
   height: 100px;
   background-color: yellow;
   border: 1px solid black;	 
   transform: matrix(1, 2, -1, 1, 80, 80);
}

ÇIKTI:

Mouse ile kutu üzerine gelin.





matrix(1, 1.5, -1, 1, 80, 80)


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

4874

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 AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.