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.
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=