css rotate animation

1<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">
2
3.image {
4    position: absolute;
5    top: 50%;
6    left: 50%;
7    width: 120px;
8    height: 120px;
9    margin:-60px 0 0 -60px;
10    -webkit-animation:spin 4s linear infinite;
11    -moz-animation:spin 4s linear infinite;
12    animation:spin 4s linear infinite;
13}
14@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
15@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
16@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

1div {
2  width: 80px;
3  height: 80px;
4  background-color: skyblue;
5}
6
7.rotated {
8  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
9  background-color: pink;
10}
11

1div {
2  position: absolute;
3  left: 40px;
4  top: 40px;
5  width: 100px;
6  height: 100px;
7  background-color: lightgray;
8}
9
10.rotate {
11  background-color: transparent;
12  outline: 2px dashed;
13  transform: rotate(45deg);
14}
15
16.rotate-translate {
17  background-color: pink;
18  transform: rotate(45deg) translateX(180px);
19}
20
21.translate-rotate {
22  background-color: gold;
23  transform: translateX(180px) rotate(45deg);
24}
25

1<div 
2  class="rotating"
3  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
4 >Rotate</div>