Haftanın Fragmanı

Bu hafta oyun tanıtım rehberlerimiz başlıyor .Dreamweaver,PhotoShop vb. Derslerimizin videoları paylaşıma açılacak.Yazarlarımızdan gelen video,köşe yazısı gibi içerikleri sitemizde derleyip yayınlıyoruz.Sitemizde Yayın yapmak isteyenler Bizlerle iletişime Geçsinler.

Opencore | Açık Çekirdek Platformu

Transform kullanımı

CSS3 Transform Kullanımı

CSS3 Transform Kullanımı
------------------------------------------------------------------------------------

 Merhabalar, sizlere CSS3 ile gelen bir özellik olan transform özelliğinden bahsetmek istiyorum. Transform türkçe karşığı dönüşüm anlamına gelir. Yaygın olarak kullanılan bir özelliktir.

Transform özelliği ile bir çok dönüşüm işlemi yapabiliyoruz. Bunları tek tek görmek için buyurun aşağıdaki örneklere bakalım.

1.Translate çevirmek anlamına gelir ve bir nesnenin konumunu değiştirmek veya kaydırmak için kullanılır.
CSS Kodu:

#arkaplan {
    background: #00ccff;
    width: 200px;
    height: 200px;
    cursor: pointer;
}
#arkaplan:hover {
     transform: translate(50px);
      -webkit-transform: translate(50px);
      -moz-transform: translate(50px);
      -o-transform: translate(50px);
}

HTML Kodu:
<div id="arkaplan"></div>
 2. Scale Nesnenin boyutunu değiştirmek için kullanılır.

CSS Kodu: 

#arkaplan {
    background: #00ccff;
    width: 200px;
    height: 200px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
}
#arkaplan:hover {
     transform: scale(.5);
      -webkit-transform: scale(.5);
      -moz-transform: scale(.5);
      -o-transform: scale(.5);
}
Not Mutlaka html kodu her ikisini kullanırken yapıştırın.





Bu sayfa hakkında yorum ekle:
İsminiz:
Siteniz:
Mesajın:


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=