CSS3 özelliklerini anlatmaya devam ediyorum.Bu derste 2d transform özelliklerini anlatacam.Transformun 3d özellikleride var bir başka derste ona değinecem.2d transformla neler yapabiliriz.
rotate = döndürme
skew = bükme
translate = pozisyon
scale = büyültme
1-Rotate
Bir objeyi döndürmek için kullanırız.
+ değer sağa
- değer sola döndürür.Örnek yapalım.
.buton{
width:100px;
height:100px;
margin:100px;
background:red;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);}
burdaki deg=derece anlamında.yani objemizi 45 derece sağa çevirdik.
görüntü:
2-Skew
Skew bükme için kullanılır.Örnek açıkmak en iyisi.
.buton{
width:100px;
height:100px;
margin:100px;
background:red;
transform:skew(25deg);
-webkit-transform:skew(25deg);
-moz-transform:skew(25deg);
-o-transform:skew(25deg);}
görüntü :
- değer vererek diğer tarafa bükebilirsiniz.
3-Translate
Objeye pozisyon vermek için kullanırız.
traslate(x ekseni ,y ekseni)
görüntü:
.buton{
width:100px;
height:100px;
margin:100px;
background:red;
transform:translate(200px,300px);
-webkit-transform:translate(200px,300px);
-moz-transform:translate(200px,300px);
-o-transform:translate(200px,300px);}
görüntüsü :
200 ps sağa kaydı 300 px de aşağı kaydı.
4-Scale
Objeyi belirli bir oranda büyültmek ve küçültmek için kullanırız.Standar değeri scale(1,1)
1 leri 2 yaparsak obje 2 katıkana çıkacaktır.ilk paremetre x ekseninde yani yanlamasına büyültüyor diğeri y ekseninde yani diklemesine büyültüyor.Örneğe geçelim.
.buton{
width:100px;
height:100px;
margin:100px;
background:red;
transform:scale(2,1);
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-o-transform:scale(2,1);}
görüntüsü :
Transform işlemleri bu kadar genel bir örnek yapayım.
Birde transform parametrelerinden bir kaçını birlikte kullanabiliriz.Aşağıdaki örnekteki gibi.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu{width:100px;height:100px;margin:100px;background:red;transform:rotate(15deg) scale(2,2);-webkit-transform:rotate(15deg) scale(2,2);-moz-transform:rotate(15deg) scale(2,2);-o-transform:rotate(15deg) scale(2,2);}
</style>
</head>
<body>
<div class="kutu"></div>
</body>
</html>
UstaDerslik
