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
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
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
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
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
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
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
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
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...
