xxxxxxxxxx
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
xxxxxxxxxx
/* CSS Code for Rotation Animation */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Apply the animation to an element */
.element {
animation: rotate 2s linear infinite;
}
CSS rotate on HOVER
xxxxxxxxxx
.image {
overflow: hidden;
transition-duration: 0.8s;
transition-property: transform;
}
.image:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
xxxxxxxxxx
div {
position: absolute;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
background-color: lightgray;
}
.rotate {
background-color: transparent;
outline: 2px dashed;
transform: rotate(45deg);
}
.rotate-translate {
background-color: pink;
transform: rotate(45deg) translateX(180px);
}
.translate-rotate {
background-color: gold;
transform: translateX(180px) rotate(45deg);
}
xxxxxxxxxx
/*all frames for rotation*/
@import = url("https://pastebin.com/raw/CStAV14T")
.rotate{
/* Start the rotate animation and make the animation last for 1 second */
animation: rotate 1s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}