CSS TRANSFORM ÖZELLİKLERİ

Merhaba,...

Css ile sayfa içindeki blok elemanlara TRANSFORM özelliği ile farklı şekillerde dönüşüm uygulayabiliyoruz.. Scale , Rotate, Translate, Skew vs gibi..

TRANSFORM

Transform dönüşüm anlamına gelir. Blok elemanların, görünüm oranları, eğimleri , açısal dönüşilerini vs değiştirebilir..

• Rotate (Döndürme)
• Scale ( Ölçekleme)
• Skew (Eğim)
• Translate (Konum Değştirme)

ROTATE (DÖNDÜRME)

Blok elemanları döndürmek için kullanılır.. Döndürme için derece cinsinden (deg) değer verilir. Elemanlar pozitif değerlerde  saat yönünde negatif  (-) değerlerde yönünün tersinde döner..

CSS

div{
    float:left;
    margin:2rem;
    width:50px;
    height:50px;
    color:#fff;
    padding:1rem;
 }
 .div1 { transform:rotate(30deg);background-color:#f00;}
 .div2 { transform:rotate(45deg);background-color:#0f0;}
 .div3 { transform:rotate(60deg);background-color:#00f;}

HTML

 <div class="div1"> DIV 1 30deg</div>
 <div class="div2"> DIV 2 45deg </div>
 <div class="div3"> DIV 3 60deg </div>

EKRAN

ROTATE

Yukarıda Kırmızı div saat yönünde 30 derece dönerken , yeşil div 30 derece, mavi div ise 60 derece döner..

SKEW (EĞİM)

Skew özelliği ile blok elemanlara eğim verebiliyoruz..

• skew ile tek değer kullanılırsa   yataydaki eğimi, iki değer kullanılırsa hem yatay hem dikeydeki eğimi belirlenir..
• skewX ile yataydaki eğimi belirlenir.
• skewY ile dikeydeki eğimi belirlenir.

Eğim değerleri derece (deg) ile belirtilir!

CSS

div{
    float:left;
    margin:2rem;
    width:80px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:skew(0);background-color:red  }
 .durum2 {  transform:skew(15deg); }
 .durum3 {  transform:skew(0,15deg); }

HTML

 <div class="durum1"> Durum 1 skew(0)<br>orjinal</div>
 <div class="durum2"> Durum 2 skew(15deg)</div>
 <div class="durum3"> Durum 3 skew(0,15deg)</div> 

EKRAN

SKEW()

Yukarıda, 

• Durum1 : skew(0) ile eleman eğim almaz.  skew(0) yerine  hiç skew özelliği belirtmemekte eğim almamasını sağlayacaktır..
• Durum2 :  skew(15deg) ile div yatay eksende 15 derece eğim alır..
• Durum3 :  skew(0,15deg) ile div yatay eksende 0 derece yani eğim almazken, yatay eksende 15derece eğim almış olur..

SKEWX() ve SKEW(Y)

Eğimleri farklı eksenlerde ayrı ayrı vermek için skewX() ve skewY() fonksiyonları kullanılır...

CSS

div{
    float:left;
    margin:2rem;
    width:80px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:skew(0);background-color:red  }
 .durum2 {  transform:skewX(30deg); }
 .durum3 {  transform:skewY(30deg); }

HTML

 <div class="durum1"> Durum 1 skew(0)<br>orjinal</div>
 <div class="durum2"> Durum 2 skewX(30deg)</div>
 <div class="durum3"> Durum 3 skewY(30deg)</div> 

EKRAN

SKEWX()  SKEWY()

Yukarıda, 

• Durum1 : skew(0) ile eleman eğim almaz.  skew(0) yerine  hiç skew özelliği belirtmemekte eğim almamasını sağlayacaktır..
• Durum2 :  skewX(30deg) ile div yatay eksende 30 derece eğim alır..
• Durum3 :  skewY(30deg) ile div yatay eksende 30 derece eğim almış olur..

TRANSLATE (KONUMLANDIRMA)

Translate özelliği ile blok elemanların X ve Y konumlarını belirleyebiliyoruz. Yatay ve Dİkeyde aldıkları konumlar , relative konumlandırma'daki gibi diğer elemanların yerleşimlerini etkilemez..

• translate ile tek değer kullanılırsa  yataydaki konum, iki değer kullanılırsa hem yatay hem dikeydeki konum belirlenir..
• translateX ile yataydaki konum belirlenir.
• translateY  ile dikeydeki konum belirlenir.

Translate değerleri css birimleri ile (px , % , rem vs)  belirtilir!  Değerler pozitif olduğunda konumlandırma yatayda sağa ve dikeyde  aşağı  doğru olurken, negatif değerlerde tersi yönde konumlandırılma gerçekleşir...

CSS

div{
 
    margin:1rem;
    width:150px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:translate(0);background-color:red  }
 .durum2 {  transform:translate(50px); }
 .durum3 {  transform:translate(100px,50px); }

HTML

 <div class="durum1"> Durum 1 translate(0)<br>orjinal</div>
 <div class="durum2"> Durum 2 translate(50px)</div>
 <div class="durum3"> Durum 3 translate(100px,50px)</div> 

EKRAN

TRANSLATE()

Yukarıda, 

• Durum1 : translate(0) ile elemanın konumu değişmez.  translate(0) yerine  hiç translate özelliği belirtmemekte konumunun aynı kalmasını sağlayacaktır..
• Durum2 :  translate(50px) ile div yatay eksende 15px sağa kayar..
• Durum3 :  translate(100px,50px) ile div yatay eksende 100px sağa kayarken , dikeyde 50px aşağıya kaymış olur..

TRANSLATEX() ve TRANSLATEY()

Konumlandırmaları farklı eksenlerde ayrı ayrı uygulamak için translate() ve translate() fonksiyonları kullanılır...

CSS

div{
    float:left;
    margin:2rem;
    width:80px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:translate(0);background-color:red  }
 .durum2 {  transform:translateX(150px); }
 .durum3 {  transform:translateY(-40px); }

HTML

 <div class="durum1"> Durum 1 translate(0)<br>orjinal</div>
 <div class="durum2"> Durum 2 translate(50px)</div>
 <div class="durum3"> Durum 3 translate(100px,50px)</div>  

EKRAN

TRANSLATEX()  TRANSLATEY()

Yukarıda, 

• Durum1 : translate(0) ile elemanın konumu değişmez.  translate(0) yerine  hiç translate özelliği belirtmemekte konumunun aynı kalmasını sağlayacaktır..
• Durum2 :  translateX(150px) ile div yatay eksende 150px sağa kayar..
• Durum3 :  translateY(-40px) ile div dikey eksende - değer olduğu içim aşağı değil 40px yukarı  kayar. 

SCALE (ÖLÇEKLENDİRME)

Blok elemanların boyut ölçeğini (en/boy oranları) değiştirmek için kullanılır..  

• scale ile aynı anda en ve boy oranları,   
• scaleX ile en oranı,
• scaleY ile ise boy oranı ölçeklenebilir.

Scale değerleri rakamla yada yüzde ile belirtilebilir.

• "1" yada "100%" orjinal ölçeği belirtir,
• "0 ile 1 arası" yada "0% ile 100% arası" değerlerde en boy oranları küçülürken,
• "1'den"  yada "100%'den" büyük değerlerde  ise en boy oranları büyüyecektir.

scale() özelliğinde, parantez içinde tek değer yazılırsa , hem en hem boy oranı aynı miktarda artar yada azalır. Ancak aralarına virgül konularak 2 değer yazılrısa, ilk değer en oranını , ikinci değer boy oranını değiştirir. Orjinal en/boy oranının korunması isteniyorsa tek değer kullanılmalıdır.

CSS

div{
    float:left;
    margin:2rem;
    width:80px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:scale(1);background-color:red  }
 .durum2 {  transform:scale(80%); }
 .durum3 {  transform:scale(1.5); }

HTML

 <div class="durum1"> Durum 1 scale(1)<br>orjinal</div>
 <div class="durum2"> Durum 2 scale(80%)</div>
 <div class="durum3"> Durum 3 scale(1.5)</div> 

EKRAN

SCALE()

Yukarıda, 

• Durum1 scale(1) ile orjinal boyutunu korumuş olur. Scale(1) yerine scale(100%) kullanmak yada hiç scale özelliği belirtmemekte orjinal boyutta kalmasını sağlayacaktır..
• Durum2 scale(80%) ile orjinal boyutunun %80'ine küçülür.
• Durum3 ise scale(1.5) ile orjinal boyutunun 1. katı olur..

SCALE İLE FARKLI EN/BOY ORANLARI UYGULAMAK

Blok elemanlara scale() ile hem en hem boy oranlarını eşit miktarda arttırıp azalttık. Ancak dilersek , en ve boy oranlarını ayrı ayrı da değiştirebiliriz. Bunun için 2 değerli scale(X,Y) kullanabileceğimiz gibi , sadece en oranını belirlemek için scaleX() ve sadece boy oranını belirlemek için ise scaleY() özelliklerinin kullanabiliriz...

CSS

div{
    float:left;
    margin:2rem;
    width:80px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:scale(1);background-color:red  }
 .durum2 {  transform:scale(80%,1.5); }
 .durum3 {  transform:scaleX(1.5); }
 .durum4 {  transform:scaleY(150%); }

HTML

 <div class="durum1"> Durum 1 scale(1)<br>orjinal</div>
 <div class="durum2"> Durum 2 scale(80% , 1.5)</div>
 <div class="durum3"> Durum 3 scaleX(1.5)</div> 
 <div class="durum4"> Durum 4 scaleY(150%)</div> 

EKRAN

SCALE(X,Y)  - SCALEX() - SCALEY()

Yukarıda, 

• Durum1 :  scale(1) ile orjinal boyutunu korumuş olur. Scale(1) yerine scale(100%) kullanmak yada hiç scale özelliği belirtmemekte orjinal boyutta kalmasını sağlayacaktır..
• Durum2 :  scale(80% , 1.5) ile en oranı %80'ine düşerken, boy oranı 1.5 katı olur..
• Durum3 :  scaleX(1.5) ile sadece en oranı 1.5 katına çıkar.
• Durum4 :  scaleY(150%) ile sadece boy oranı 1.5 katına çıkar.

En ve Boy oranları farklı miktarlarda arttırılıp azaltılırsa, eleman içindeki nesnelerde yada yazılrda bozulmalar olacaktır...

AYNI ANDA BİRDEN FAZLA TRANSFORM ÖZELLİĞİ UYGULAMAK

BİR elemana birdenfazla transform özelliği uyugulamak için , aralarına boşluk bırakılarak istenilen transform özellikleri yazılır. Örneğin bir div'e  hem rotate hemde scale uygulayalım..

CSS

div{
    float:left;
    margin:2rem;
    width:150px;
    height:50px;
    color:#fff;
    padding:1rem;
    background-color:#00f;
 }
 .durum1 {  transform:scale(1);background-color:red  }
 .durum2 {   transform: scale(1.5) rotate(45deg);  }

HTML

 <div class="durum1"> Durum 1 scale(1)<br>orjinal</div>
 <div class="durum2"> Durum 2  scale(1.5) rotate(45deg);</div> 

EKRAN

SCALE()

Yukarıda kırmzıı div normal görünümdeyken , durum 2 ile belirtilen mavi div hem 1.k katı oranında büyümüş  hemde 15derece dönmüş olur..

Bu şekilde istenildiği kadar transform özelliği aynı anda uygulanabilir..

Görüşmek üzere...