efectos para las imagenes al pasar el cursor

Les traigo algunos efectos simpaticos que pueden usar para sus blog!! funcionan cuando se coloca el cursor sobre las imagenes del blog...

  1er Efecto: efecto giratorio

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
-o-transform:perspective(400px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: perspective(400px) rotateX(360deg) ;
-moz-transform: perspective(400px) rotateX(360deg) ;
-o-transform: perspective(400px) rotateX(360deg);}

 2do efecto: efecto agrandado

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{
-webkit-transform: perspective(400px) ;
-moz-transform:perspective(400px) ;
-o-transform:perspective(400px) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform:perspective(400px) translateZ(150px) ;
-moz-transform:perspective(400px) translateZ(150px) ;
-o-transform:perspective(400px) translateZ(150px) }

3er efecto: efecto transicion

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{

-webkit-border-top-left-radius: 100px;

-webkit-border-bottom-right-radius: 100px;

-moz-border-radius-topleft: 100px;

-moz-border-radius-bottomright: 100px;

border-top-left-radius: 100px;

border-bottom-right-radius: 100px;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

}

img:hover{

-webkit-border-top-right-radius: 100px;

-webkit-border-bottom-left-radius: 100px;

-moz-border-radius-topright: 100px;

-moz-border-radius-bottomleft: 100px;

border-top-right-radius: 100px;

border-bottom-left-radius: 100px;

-webkit-border-top-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-bottomright: 0px;

border-top-left-radius: 0px;

border-bottom-right-radius: 0px;}

 4er efecto: efecto que gira hasta desaparecer

 primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0)
}