.robov {
height: 42px;
width: 42px;
cursor: pointer;
border: 1px solid #BDC3E0;
border-radius: 44px;
background-image: url(//www.slinky.me/files/spritef.png);
background-position: -1px -89px;
text-indent: -9999px;
display: block;
-webkit-transform: rotate(0deg);
}
.robov:hover {
transform: scale(1);
-webkit-filter: contrast(1) sepia(0);
-webkit-transform: rotate(-900deg);
}
Дальнейшее чтение:
www.w3schools.com/css/css3_2dtransforms.asp
(ссылкой промахнулся в первый раз)
UPD: а это расходящиеся круги
.robov:after {
top: 0;
left: 0;
padding: 0;
z-index: 1;
box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
.robov:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.robov:hover:after {
-webkit-animation: sonarEffect 1.1s ease-out 55ms infinite;
-moz-animation: sonarEffect 1.1s ease-out 55ms infinite;
animation: sonarEffect 1.1s ease-out 55ms infinite;
}
