Efecto rotate

Hey babies! Llevo unos días (igual unas semanas) sintiéndome muy apática y yo sé porqué es, pero aún así odio sentirme así, porque tengo ganas de escribir entradas, hacer cosas en el blog (como modificar las etiquetas o hacer algunos pequeños cambios al diseño) pero en fin... espero que solo sea una pequeña racha de apatía por culpa del cambio de tiempo y se pase pronto.

Y hoy, como habéis podido ver en el título, traigo un nuevo efecto para el blog que me parece muy simple, pero queda bonito y se parece al que estoy usando en los afiliados y, aprovecho para decir que he tenido que cambiar de lugar (otra vez 🙄) las previews de los efectos/menús/etc porque tumblr me estaba dando problemas por usar javascript, así que hice de nuevo un blog solo para esa función y me gustó el resultado porque están individuales.

Preview

1. Vamos al HTML de nuestro blog y buscamos ]]></b:skin> y ANTES colocamos el siguiente código:

.afiliados {
box-shadow: 2px 1px 3px #909090;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}

.afiliados:hover {
transform: rotate(-360deg) scale(1) skew(0deg);
-moz-transform: rotate(-360deg) scale(1) skew(0deg);
-webkit-transform: rotate(-360deg) scale(1) skew(0deg);
-o-transform: rotate(-360deg) scale(1) skew(0deg);
}

Todo lo que está en negrita se puede cambiar o quitar, como el caso de los border redondeados, podemos ponerlo en cero (0) para directamente quitar lo redondeado.

2. Ahora solo debemos crear un widget HTML/Javascript con el siguiente código:

<a href="LINK" title="TÍTULO"><img src="URL IMAGEN" class="afiliados"/></a>

Cambiamos lo que está en negrita y podemos pegarlo tantas veces queramos.