Mark
#1

 Hola, continuando con los trabajos sencillos, pero útiles les dejaré un efecto para imágenes, aunque este mismo efecto puede ser utilizado para elementos como letras o bloques de textos yo lo veo mas vistoso y útil para las imágenes, aun así puede ser utilizado como mas les satisface, para este efecto utilizaremos también la propiedad "transform: rotate" la cual explique su funcionalidad en mi anterior Entrada sobre los distintos efectos que se pueden obtener, comencemos con la explicación:

Ejemplo 1

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código:

See the Pen Voltear imagenes utilizando CSS3 - 1/3 by eltorga (@eltorga) on CodePen.

Luego, para llamar al efecto colocamos esto (class="efecto-voltear") dentro de la etiqueta "img" de esta forma:

See the Pen Voltear imagenes utilizando CSS3 - 1/3 by eltorga (@eltorga) on CodePen.

 El resultado será el siguiente:

See the Pen Voltear imagenes utilizando CSS3 - 1/3 by eltorga (@eltorga) on CodePen.

Ejemplo 2

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

See the Pen Voltear imagenes utilizando CSS3 - 2/3 by eltorga (@eltorga) on CodePen.

Luego, para llamar al efecto colocamos esto (class="efecto-voltear-dos") dentro de la etiqueta "img" de esta forma:

See the Pen Voltear imagenes utilizando CSS3 - 2/3 by eltorga (@eltorga) on CodePen.

El resultado será el siguiente:

See the Pen Voltear imagenes utilizando CSS3 - 2/3 by eltorga (@eltorga) on CodePen.

Lo que acabamos de hacer aquí es decirle objeto que gire 180°, ya sea en vertical (X) o en horizontal (Y), al igual que mi anterior entrada podemos decidir si queremos que el objeto o la imagen se voltee de arriba hacia abajo o de abajo hacia arriba, al igual que de izquierda a derecha o derecha a izquierda aplicándole un signo de resta (-) dentro del valor designado de esta forma: (-180deg)

Ejemplo 3

También podemos ordenarle al objeto que de una vuelta completa regresando a su posición original, para ello le indicaremos que gire 360° y aumentaré el tiempo de la animación a 1 segundo para apreciar mejor el efecto

copia y pega el siguiente código css en donde tengas los estilos de tu web, si usas blogger busca ]]></b:skin> y arriba pega el siguiente código

See the Pen Voltear imagenes utilizando CSS3 - 3/3 by eltorga (@eltorga) on CodePen.

 Luego para llamar al efecto colocamos esto (class="efecto-voltear-tres") dentro de la etiqueta "img" de esta forma:

See the Pen Voltear imagenes utilizando CSS3 - 3/3 by eltorga (@eltorga) on CodePen.

 El resultado sera el siguiente:

See the Pen Voltear imagenes utilizando CSS3 - 3/3 by eltorga (@eltorga) on CodePen.

Bueno amigos eso fue todo, espero que les haya gustado, cualquier duda o inquietud, déjenla en un comentario ^^


image quote pre code
Compartir: