I’m pretty much failing on this simple task. Here’s what I put together and I do think that the image is not perfect and thus the warped spinning image. I think this CSS is way beyond me. If I’m missing anything that simple please let me know.
I haven’t used codepen before, but I simply placed this code inside my theme. referencing this URL:
http://www.ccsdesignhouse.com/three/spinning/
.spin img {
display: block;
background:#333;
border-radius:40px;
}
.spin img:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
