728x90 AdSpace

  • Latest News

    2/15/2012

    CSS3 Transform Kullanımı ve Değer Özellikleri



    CSS3 özelliklerini yeni yeni takip edenler için ufak tefek özellikleri sizin için derleyip burada paylaşmayı düşünüyorum. CSS3 ve HTML5 çok kullanışlı yeni özellikleri ile gün geçtikçe öğreneceğiz.

    Dönüşüm özelliklerinde belli başlı aldığı değerler şöyle:

    CSS3 Transform – Rotate

    html
    <img src="css3.jpg" class="resim">
    css
    .resim{
    
    transform:rotate(30deg);
    
    -moz-transform:rotate(30deg);        /* Firefox */
    
    -webkit-transform:rotate(30deg);    /* Safari ve Chrome */
    
    -o-transform:rotate(30deg);            /* Opera */
    
    -ms-transform:rotate(30deg);          /* IE  */
    
    }
    Yukarıda gördüğünüz gibi tüm tarayıcılar için ortak bir tanımlama pek mümkün değil.Farklı tarayıcılar için farklı tanımlamalar gerekiyor. Yukarda hangi tarayıcının hangi değer aldığını gördünüz. Bundan sonraki adımlarda sadece firefox tanımlamasına yer vereceğim.

     CSS3 Transform – Skew


    .resim{
    
    -moz-transform: skew(20deg);
    
    }


    Skew eksi değerini de alıyor. Eksi değerini girdiğinizde tam ters yöne yatıyor.


    .resim{
    
    -moz-transform: skew(-20deg);
    
    }


      CSS3 Transform – Scale


    .resim{
    
    -moz-transform: scale(0.5);
    
    }


    Bu komut ile elemanları ölçeklendirebiliyoruz. Şimdilik bu kadar gün geçtikçe daha kapsamlı notlar paylaşılacaktır...

    Mehmet Ali

    Grafik tasarım konusunda bir şeyler öğrenmekte, öğrenmekte olduklarını paylaşmakta.

    Website: Mhmtalizm

    • Blogger Yorumları
    • Facebook Yorumları

    0 yorum:

    Yorum Gönder

    Item Reviewed: CSS3 Transform Kullanımı ve Değer Özellikleri Rating: 5 Reviewed By: Kirli Adam
    Scroll to Top