CSS3 2D Transform işlemleri (Döndürm-Pozisyon-Bükme-Büyültme)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 2D Transform işlemleri (Döndürm-Pozisyon-Bükme-Büyültme)

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(3631)
RAPOR ET
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ü:
http://ustaderslik.com/resim/ders/rkd6s.png
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ü :
http://ustaderslik.com/resim/ders/rkd9s.png
- 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ü :
http://ustaderslik.com/resim/ders/rkdhs.png
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ü :
http://ustaderslik.com/resim/ders/rkdpw.png

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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol