Css

CSS İle Nesnelere Döndürme Efekti Vermek

Herkese merhabalar arkadaşlar bu yazımızda sizlere Css ile nesnelere döndürme efekti vermeyi göstereceğiz.Umarız işinize yarar.

Öncelikle döndürme efektimiz için bir kutu oluşturalım.Kutnun css kodları aşağıdaki gibi olacaktır.

Oluşturacağımız kutunun Css kodları;

Şimdi css sallandırma kodlarına geçelim.Bu kodlar yukarıdaki kutumuzu sallandıracaktır.

Css kodlarımız bu şekildedir.Şimdi ise html kodlarını paylaşalım sonrasında kutumuzun sallandırılmasını birlikte görelim.

Html Kodları;

Şimdi normal kutumuzu paylaşalım;

Bu da sallandırılma efekti olan kutumuzdur;

Gördüğünüz gibi arkadaşlar kutumuzu sallandırdık.Burada sallandırma kodlarında kırmızı renkle belirttiğimiz “0.5s” kısmından zamanı istediğiniz gibi ayarlayabilirsiniz.Mavi renkle belirttiğimiz “10deg” yerde ise sallandırma derecesini aynı şekilde istediğiniz gibi ayarlamanız mümkündür.

Ek olarak “@Keyframes” google chrome için,”@-moz-keyframes” mozilla için ve “@-webkit-keyframes” diğer tarayıcılar için kullanılmaktadır.

Umarız faydalı olur.Herkese iyi çalışmalar dileriz…

YORUMLAR

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir