Developers of CSS can get useful tips and tricks about their works from here. Designers can easily read latest my custom essay reviews for learning of writing skills. Image moving according to needs is become easy for designers.
It’s simple, use this code below.
<a href=”https://jsfiddle.net/jitsubha/twb3pouc/”>DEMO</a>
use this css
<pre>
.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); } }
</pre>
<pre>
<img class=”image” src=”http://makeameme.org/media/templates/120/grumpy_cat.jpg” alt=”” width=”120″ height=”120″>
</pre>
It’s very simple.
- You add an image.
- You create a css property to this image.
<code><span class="pln">img </span><span class="pun">{</span> <span class="kwd">border-radius</span><span class="pun">:</span> <span class="lit">50%</span><span class="pun">;</span> <span class="kwd">-webkit-transition</span><span class="pun">:</span><span class="pln"> -webkit-transform </span><span class="lit">.8s</span><span class="pln"> ease-in-out</span><span class="pun">;</span> <span class="kwd">transition</span><span class="pun">:</span><span class="pln"> transform </span><span class="lit">.8s</span><span class="pln"> ease-in-out</span><span class="pun">;</span> <span class="pun">}</span> <span class="kwd">img</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span> <span class="kwd">-webkit-transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">360deg</span><span class="pun">);</span> <span class="kwd">transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">360deg</span><span class="pun">);</span> <span class="pun">}</span></code>
<code><span class="tag"><img</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://datainflow.com/xyz.jpg"</span> <span class="tag">/></span></code>