CSS İle Nesnelere Döndürme Efekti Vermek

« Facebook’ta Gif Resimlere Tıklandığında Başka Siteye Aktarma

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ı;

#kutu{
margin: 500px;
 height: 500px;
 width: 500px;
 background-color:red;
 border-radius:25px;
}

#kutu{

margin: 500px;

height: 500px;

width: 500px;

background-color:red;

border-radius:25px;

}

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

.sallama {
 transform-origin: center center;
 -moz-transform-origin: center center;
 -webkit-transform-origin: center center;
}
.sallama:hover {
 animation: 0.5s ease 0s normal none infinite swing;
 -moz-animation: 0.5s ease 0s normal none infinite swing;
 -webkit-animation: 0.5s ease 0s normal none infinite swing;
}
@Keyframes swing {
 0% {
 transform: rotate(10deg);
 }
 50% {
 transform: rotate(-5deg);
 }
 100%{
 transform: rotate(10deg);
 }
 }
@-moz-keyframes swing {
 0% {
 -moz-transform: rotate(10deg);
 }
 50% {
 -moz-transform: rotate(-5deg);
 }
 100%{
 -moz-transform: rotate(10deg);
 }}
@-webkit-keyframes swing {
 0% {
 -webkit-transform: rotate(10deg);
 }
 50% {
 -webkit-transform: rotate(-5deg);
 }
 100%{
 -webkit-transform: rotate(10deg);
 }}

.sallama {

transform-origin: center center;

-moz-transform-origin: center center;

-webkit-transform-origin: center center;

}

.sallama:hover {

animation: 0.5s ease 0s normal none infinite swing;

-moz-animation: 0.5s ease 0s normal none infinite swing;

-webkit-animation: 0.5s ease 0s normal none infinite swing;

}

@Keyframes swing {

0% {

transform: rotate(10deg);

}

50% {

transform: rotate(-5deg);

}

100%{

transform: rotate(10deg);

}

@-moz-keyframes swing {

0% {

-moz-transform: rotate(10deg);

}

50% {

-moz-transform: rotate(-5deg);

}

100%{

-moz-transform: rotate(10deg);

}}

@-webkit-keyframes swing {

0% {

-webkit-transform: rotate(10deg);

}

50% {

-webkit-transform: rotate(-5deg);

}

100%{

-webkit-transform: rotate(10deg);

}}

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ı;

<center>
<div id="kutu" class="sallama"> </div>
</center>

</center>

Ş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…

Bu Yazıya Tepkin Ne Oldu ?