Css ile Resimleriniz Üzerine Gelindiğinde 360 Derece Dönsün

 23 Mayıs 2015 Tasarım  Yorum Yok 

Yeni kategorimiz Css için yine kaliteli ve çok sorulan bir özelliği aktarmak istiyorum. Css ile yapacağımız class’a eklediğimiz resimleri dilediğimiz derecede döndürebileceğiz. Aşağıda kullanmanız gereken css kodlarını veriyorum. Bunları sitenizin style.css dosyasının içerisine ekleyerek img class’ına donenresim yazdığınızda resim 360 derece dönmeye başlayacaktır.

[css].donenresim {
position:block;
padding-bottom: 0.17in;

}

.donenresim img {
border:1px solid rgba(0,0,0,0.25);
border-radius:5px 5px 5px 5px;
box-shadow:0 1px 3px rgba(0,0,0,0.15);
background:transparent;
}
.donenresim:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}[/css]

dönüşler hızlı geldi ise delay zamanını yükseltelim. Bunun için ise

[css]-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;[/css]

yukarıdaki css kodlarında 0.5s yazan gecikme zamanını arttırarak 2s yapalım. Sonuç artık resimleriniz daha yavaş bir dönüş gerçekleştirecek. Yukarıdaki kodda all yazan kısım bütünüyle döndürüldüğünü bize açıklar.Dilerseniz efektin uygulanacağı öğeyi belirtebilirsiniz(arkaplan vb.) Ease-in-out ise dönüş animasyonudur.

Aşağıdaki kodda ise

[css]rotate(360deg)[/css]

kısımlarını dilediğimiz rakam ile değiştirerek resmin kaç derecelik bir dönüş gerçekleştireceğini belirtebiliriz. Örneğin 90 olarak değiştirirseniz 90 derecelik bir açı gerçekleştirirsiniz ve resim 90 derece döner.

Gelelim kodu kullanmaya;

[html]<img class="donenresim" src="Dönecek Resmin URL’i">[/html]

Artık dönen bir resime sahip olacaksınız. Peki resimlerin değilde bu şekilde yazıların dönmesini gerçekleştirebilirmiyim ? Pek tabi buda mümkün. Fakat bu özelliği linklere uygulayabilirsiniz.

Yukarıdaki aynı kodları kullanarak sadece yazıları döndürmek için ise yine class’ı bu sefer span tagına eklememiz yeterli olacaktır. Yani ;

[html]<a href="#"><span class="donenresim">Dönecek Link Yazısı</span>[/html]

Bu kod ile class atayacağınız linkler üzerine gelindiğin de dönme özelliği kazanacaktır. Umarım faydalı olmuştur. Eksik, atladığım veya yanlış olduğunu düşündüğünüz durumda yazı altındaki yorum bölümünden iletişime geçiniz.

105 Gösterim
,

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2015 - 2017
"İnsanın en hayırlısı İnsanlığa faydalı olandır." Hadis'i Şerif
Altyapı: Wordpress Tema: YBS V1.0 Beta
Sitemiz internette aranılan birçok soruya cevap vermek amacıyla kurulmuştur.