Css Rotate Animation

by
css rotate animation
<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); } }
Source: stackoverflow.com
rotate element css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}

.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}
Source: developer.mozilla.org
how to rotate image in css
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);
}
Source: developer.mozilla.org
how rotate infinity css
<div
class="rotating"
style="width: 100px; height: 100px; line-height: 100px; text-align: center;"
>Rotate</div>

 

Leave a Comment