View difference between Paste ID: 2Sz8LwtM and 73eJDgCe

 >>>>>>> 1º Passo:
 
 Colem esse código entre <style type="text/css"> e </style>
 
-#teste{
+#opd{
 
     margin-top:0px; /* quanto ela vai pra baixo */
     margin-left:0px; /* quanto ela vai pra direita */
     border-radius:100px; /* imagen circular igual a 100, imagem quadrada só é deixar em 0 */
     height:auto; /* altura da foto */
     width:200px; /* largura da foto */
     opacity:0.5; /* 0.5 você aumenta se quiser mas opaco ou diminui... */
     -webkit-transition: opacity 0.8s linear;
   -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
       -ms-transition: all 0.5s ease;
           transition: all 0.5s ease;
 }
-#teste:hover {
+
-    /* -360deg é quanto a foto vai girar, no nosso caso ela vai dar a volta inteira */
+#opd:hover {
-  -webkit-transform: rotate(-360deg);
+
-     -moz-transform: rotate(-360deg);
+    opacity:1; /* pra ela voltar ao modo normal */
-       -o-transform: rotate(-360deg);
+
-      -ms-transform: rotate(-360deg);
+       -webkit-transition: all 0.5s ease;
-          transform: rotate(-360deg);
+
-            -webkit-transition: all 0.5s ease;
+
       -ms-transition: all 0.5s ease;
           transition: all 0.5s ease;
 }
 
 >>>>>>> 2º Passo:
 
 Colem esse código depois de </style> e antes de </body>
 
 <img id="opd" src="URL da IMAGEM que vc quer">
 
-<img id="teste" src="URL da IMAGEM que vc quer">
+TUTORIAL FEITO POR AMPLAMENTE.