TUTORIAL HTML/CSS | ROTAR IMÁGENES

PASA EL RATÓN POR ENCIMA DE LAS IMÁGENES

Hoy os traigo un tutorial de los que me gustan a mí. Desde que descubrí las posibilidades de HTML, me he vuelto una friki y siempre estoy buscando y probando cosas nuevas. Como habréis podido ver, se trata de jugar con las imágenes, girándolas a nuestro antojo, tanto en su posición inicial como al pasar el ratón por encima de ellas. ¡Vamos allá!

PASO 1 Lo primero que debéis hacer es tener el enlace de la imagen que queréis rotar. En Blogger es muy sencillo. Si creáis una entrada nueva o una página en blanco nueva y subís una imagen, debéis clicar en HTML en lugar de Redactar y veréis que os aparece un código así. Copiamos la parte que he subrayado, justo la que está escrita dentro de <img y borramos el código. Todo lo demás ya no lo necesitamos.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lZEYEsCpAesHO85R_JhhSrjy6XzbBRtgLapGW8vK86BhvY6OrvARR-D5ss0722-Tlo2i4FUA7EoXmTQLaTwG2gG8-lrwKDI5mxm5_Go1BIYUqwCoHd7mZiZvwVfHgC9tj80q35lfQI0/s1224/la+foto+copia.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1lZEYEsCpAesHO85R_JhhSrjy6XzbBRtgLapGW8vK86BhvY6OrvARR-D5ss0722-Tlo2i4FUA7EoXmTQLaTwG2gG8-lrwKDI5mxm5_Go1BIYUqwCoHd7mZiZvwVfHgC9tj80q35lfQI0/s1224/la+foto+copia.JPG" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZtmebrNowVswSdbb_GzOds81_NJU33PMlazVG-V4dddW5Tza894ZhWAYxNGGqmf2Ejje-plANFheugofSR7UxR6P_kgnwLR6P_XoPyqWPd6sHUP5dkgcGUEEsh8oTbUPV0aTLb6QXLE/s1600/la+foto.JPG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZtmebrNowVswSdbb_GzOds81_NJU33PMlazVG-V4dddW5Tza894ZhWAYxNGGqmf2Ejje-plANFheugofSR7UxR6P_kgnwLR6P_XoPyqWPd6sHUP5dkgcGUEEsh8oTbUPV0aTLb6QXLE/s320/la+foto.JPG" /></a>

PASO 2 Pues bien, sin volver a la opción de Redactar, debéis copiar este código y pegarlo en vuestra entrada o página manteniendo la opción de HTML, porque sino no os lo detectará, cambiando el texto por el enlace a vuestra imagen, claro.

<div class="rotar">
<img src="COLOCA-AQUÍ-EL-ENLACE-DE-TU-IMAGEN" width="320" /></div>

NOTA: Si os fijáis lo que estamos haciendo es aplicarle una clase a la imagen para después poderle dar el estilo que queramos con CSS, podéis llamarla como queráis yo le he dado el nombre de "rotar". Eso sí, si cambiáis el nombre tendréis que hacerlo también en el código que os doy en el punto 3. También le estamos aplicando una anchura a la imagen de 320 píxeles, que podéis modificar a vuestro gusto, por supuesto.

PASO 3 Una vez hecho debéis copiar el siguiente código e ir a PLANTILLA - PERSONALIZAR - AVANZADO - AÑADIR CSS y pegarlo.

.rotar{
transform:rotate(7deg)
-webkit-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-ms-transform:rotate(7deg);
-o-transform:rotate(7deg);
}

.rotar:hover{
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-ms-transform:rotate(15deg);
-o-transform:rotate(15deg);
}

NOTA: Antes de que apliquéis los cambios al blog, os explico un poco el código. Si os fijáis le estamos diciendo que queremos transformar la imagen dándole una rotación, en este caso de 7 grados, los valores en positivos harán girar la imagen en el sentido de las agujas del reloj y al revés si colocamos los valores en negativo. Y diréis ¿por qué el código es tan largo? Pues básicamente para que los diferentes navegadores que existen puedan reconocer el código. Así que si queréis cambiar el grado de rotación de las imágenes recordad que debéis cambiar los valores en todos y con el mismo valor. En la pseudo-clase .rotar:hover le estamos diciendo lo mismo pero que rote unos grados más al pasar el ratón por encima.

PASO 4 Ahora ya podéis Aplicar los cambios al blog ¡Y listo!

¿Qué os ha parecido el tutorial de hoy? Si queréis además de ver el efecto en este post también podéis verlo en mi página SOBRE MÍ. ¡¡Que tengáis un buen Lunes!!

P.D. Si tenéis alguna duda no os cortéis. Soy consciente de que a veces no me explico muy bien ;)