Css3 new effect

Follow my blog with Bloglovin

Html code

<div class="footer_strip">
<div id="footer_social_mid">
<div id="one_five">
<div class="face">
</div>
</div>
<div id="one_five">
<div class="google">
</div>
</div>
<div id="one_five">
<div class="pint">
</div>
</div>
<div id="one_five">
<div class="snap">
</div>
</div>
<div id="one_five">
<div class="twitter">
</div>
</div>
</div>

</div>

Css code

.face{ background:url(../img/footer/facebook.png);
background-position:-7px 0px;

-webkit-transition: 0.7s all ease;
-moz-transition:0.7s all ease;
transition:0.7s all ease;
height:70px




}

.face:hover{ background-position:-90px 0px;
cursor:pointer;

 transform: rotate(-55deg);

}


.google{background:url(../img/footer/google.png);
background-position:-7px 0px;

-webkit-transition: 0.7s all ease;
-moz-transition:0.7s all ease;
transition:0.7s all ease;
height:70px
}

.google:hover{ background-position:-90px 0px;
cursor:pointer;
transform: rotate(-55deg);
}




.pint{background:url(../img/footer/pint.png);
background-position:-7px 0px;

-webkit-transition: 0.7s all ease;
-moz-transition:0.7s all ease;
transition:0.7s all ease;
height:70px
}

.pint:hover{ background-position:-90px 0px;
cursor:pointer;
transform: rotate(-55deg);
}




.snap{background:url(../img/footer/snap.png);
background-position:-7px 0px;

-webkit-transition: 0.7s all ease;
-moz-transition:0.7s all ease;
transition:0.7s all ease;
height:70px
}

.snap:hover{ background-position:-90px 0px;
cursor:pointer;
transform: rotate(-55deg);
}


.twitter{background:url(../img/footer/twitter.png);
background-position:-7px 0px;

-webkit-transition: 0.7s all ease;
-moz-transition:0.7s all ease;
transition:0.7s all ease;
height:70px
}

.twitter:hover{ background-position:-90px 0px;
cursor:pointer;
transform: rotate(-55deg);
}