CSS Transformaciones y transiciones

Publicado por F. Aureliano Moreno R en

http://www.freejpg.com.ar/

Inicio este articulo con la explicación básica de las cuatro funciones de translación (Transform: Translate) que son: traslate, rotate, scale y skew. Con estas funciones inciamos un proceso de ejemplo.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Ejemplo 1 CSS TRANSFORM</title>

</head>

<body>

<p> <img src="images/juan.jpg" alt="Juan" style="width:300px; height:300px; float:left; margin:0 2em 1.4em 0;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, molestiae? Voluptas sequi, aliquam, vel officiis consectetur distinctio non, itaque nihil ipsa omnis debitis velit esse quas blanditiis aspernatur molestias dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit consequatur eligendi in explicabo suscipit soluta eaque, vitae nostrum! Porro in dolorum tempora accusamus eveniet quae amet laborum ad dolore reprehenderit.

</p>

</body>

</html>
Captura de pantalla 2015-01-07 a las 16.37.42

Figura No 1

 

Ahora con esta pagina básica iniciamos con las transformaciones.

ROTATE

Incluimos  todos los prefijos de vendor para cubrir todos los navegadores, como veran transformaremos la imagen rotándola sutilmente 7.5 grados, en sentido de las manecillas de reloj en caso contrario usaremos valores negativos.

<img src="images/juan.jpg" alt="Juan" style="width:300px; height:300px; float:left; margin:0 2em 1.4em 0; 
-moz-transform: rotate(7.5deg); 
-ms-transform: rotate(7.5deg); 
-0-transform: rotate(7.5deg); 
-webkit-transform: rotate(7.5deg); 
transform: rotate(7.5deg);”>Figura No 2
Captura de pantalla 2015-01-07 a las 16.48.11

Figura No 2

Ahora haremos una clase para tener mas control y tomaremos como punto o pivote de rotación una de las esquinas de la imagen en este caso la esquina superior derecha, y desde ahi haremos que la imagen gire,  uno 10 grados en contra de las manecillas del reloj.

<style>

img.tipo{

width:300px; height:300px; float:left;

-moz-transform-origin: right top;

    -o-transform-origin: right top; -ms-transform-origin: right top;

    -webkit-transform-origin: right top; transform-origin; right top;

-moz-transform: rotate(-10deg);

-ms-transform: rotate(-10deg);

-o-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

</style>

<body>

<p> <img src="images/juan.jpg" alt="Juan" style=" margin:0 2em 1.4em 0;" class="tipo" >

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, molestiae? Voluptas sequi, aliquam, vel officiis consectetur distinctio non, itaque nihil ipsa omnis debitis velit esse quas blanditiis aspernatur molestias dicta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit consequatur eligendi in explicabo suscipit soluta eaque, vitae nostrum! Porro in dolorum tempora accusamus eveniet quae amet laborum ad dolore reprehenderit.

</p>

 

Captura de pantalla 2015-01-07 a las 17.03.06

Figura No 3

SCALE

El uso de la transormacion SCALE podrá parecer algo inútil si lo podemos hacer en una imagen con height y width, Pero no es para eso, la utilidad de scale es que lo podemos utilizar en cualquier elemento HTML por ejemplo, si cambiamos el ancho de un parrafo el texto contenido en el tomara el espacio nuevo, con scale  se hará el texto mas grande o mas pequeño, por ejemplo si usamos : scale(2) el elemento donde lo apliquemos será dos veces mas ancho y mas alto, esto es cuatro veces su tamaño original y si lo escalamos .5 será un cuarto de su tamaño original. Pero la magia viene cuando puedes aplicar scale  en una dirección especifica: X (Horizontal), Y (Vertical) y Z (Profundidad).

Por lo que podemos usar scale para generar un efecto de espejo en cualquier elemento HTML tal y como se muestra el la figura no 4.

<style>

img.tipo{

width:300px; height:300px;

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-ms-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

}

</style>

<body>

<p> <img src="images/juan.jpg" alt="Juan" class="tipo" >
614683_10151959921055564_2122795954_o

Figura No 4


TRASLATE 

Pude parecer algo inútil tener  otro metodo que parece hacer exactamente lo mismo , ya que con el método translate ( ), el elemento se mueve desde su posición actual , en función de los parámetros dados para la izquierda (eje X) y la parte superior (eje Y ) Posición :

div {

    -ms-transform: translate(50px,100px); /* IE 9 */

    -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */

    transform: translate(50px,100px);

}

 

SKEW

Utilizar skew en un elemento nos permite nos permite modificar la inclinación tanto horizontal como vertical para que darnos una sensación de movimiento, esto es como tomar los dos lados opuestos de un rectángulo desde sus orillas y jalarlos en direcciones opuestas.

<style>

img.tipo{

width:300px; height:300px;

-moz-transform: skewX(21deg);

-o-transform: skewX(21deg);

-ms-transform: skewX(21deg);

-webkit-transform: skewX(21deg);

transform: skewX(21deg);

}

</style>
Captura de pantalla 2015-01-07 a las 18.03.07

Figura no 5

 

TRANSICIONES CSS

Una transición CSS es exactamente eso: una transición de un estado visual a otro, disparado por un evento como por ejemplo un MouseOver. Usaremos un ejemplo usando :hover para mostrar el resultado de una transición simple como es una rotación de la imagen.

img.tipo:hover{

-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);

-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);

    transform: rotate(7.5deg);

}
Mouse Over para ejemplo

TEST 1

 

En este ejemplo Test 1.  se ve como al poner el mouse sobre la imagen esta 7.5 grados en el sentido de las manecillas del reloj, sin embargo se ve a manera de un brinco, no como una animacion.

img.tipo:hover{

-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);

-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);

    transform: rotate(7.5deg);

    -moz-transition: 2s all; -o-transition: 2s all;

    -webkit-transition: 2s all; transitio: 2s all;

}
Mouse Over para ejemplo

Test 2

 

Ahora cambia verdad,  le hemos dado un tiempo de transición de 2 segundos, a todos los elementos, logrando así una animación básica, en caso de necesitar muchísima mas precisión, como seria el caso de animaciones finas se puede hacer con milisegundos. así como 200ms all,

Pero si nos ponemos un poco ridículos podemos ver como al quitar el :hover o mejor dicho al quitar el mouse de sobre la imagen esta regresa a su formato original de manera de brinco, o sin animación, esto lo podemos cambiar poniendo la transición en la clase tipo, que es la imagen  sin movimiento de esta manera.

<style>

img.tipo{

width:300px; height:300px; float:left;

-moz-transition: 2s all; -o-transition: 2s all;

    -webkit-transition: 2s all; transitio: 2s all;

}

img.tipo:hover{

-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);

-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);

    transform: rotate(7.5deg);

    -moz-transition: 2s all; -o-transition: 2s all;

    -webkit-transition: 2s all; transition: 2s all;

}
Mouse Over ejemplo

Test 3

 

Ahora ya tenemos la transición de ida y de vuelta por decirlo de alguna manera.  Esto nos da una idea básica de todo lo que se puede hacer  combinando las transformaciones con las transiciones en cualquier elemento, esto es que con imaginación podemos hacer cosas muy interesantes.

RETRASO Y COMBINACION DE TRANSICIONES.

Ahora te tenemos una animación simple podemos ver como podemos utilizar retrasos delay o otras combinaciones interesantes.

<style>

img.tipo{

width:300px; height:300px; float:left;

-moz-transition: 2s all; -o-transition: 2s all;

    -webkit-transition: 2s all; transitio: 2s all;

}

img.tipo:hover{

-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg);

-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg);

    transform: rotate(7.5deg);

/*   -moz-transition: 2s all; -o-transition: 2s all;

    -webkit-transition: 2s all; transition: 2s all;*/

opacity: .3;

}

</style>

En este ejemplo podemos ver como al mismo tiempo que se realiza la rotación de la imagen se va generando el efecto de opacidad.

Mouse Over

Test 4

Pero vamos a ponerle un poco mas de complejidad, ahora vamos a mover la imagen a la derecho creando un efecto de opacidad,  moviendo la imagen 60 pixeles a la derecha, esto gracias a su posición absoluta como eran en el codigo.

img.tipo{

width:300px; height:300px; float:left; position: realtive;

-moz-transition-property: opacity, left;

-o-transition-property: opacity, left;

    -webkit-transition-property: opacity, left;

    transition-property: opacity, left;

-moz-transition: 2s, 4s; -o-transition: 2s, 4s;

    -webkit-transition: 2s, 4s; transitio: 2s, 4s;

}

img.tipo:hover{

opacity: .2;

-webkit-transform: translateX(60px);

-moz-transform: translateX(60px);

-ms-transform: translateX (60px);

-o-transform: translateX(60px);

transform: translateX(60px);

}
Mouse Over

Test5

Eso es todo por el día de hoy, espero les haya sido de utilidad este simple y pequeño calentamiento de neuronas.

 

Categorías: GeekWEB CODE

F. Aureliano Moreno R

Creo en el poder del contenido y difundir las ideas , construir comunidades , y atraer y fascinar a los usuarios , les por eso que he invertido tiempo en aprender a crear sitios web, a ser emprendedor en proyectos de animación e imagen , me encanta la comida y hacer música. Tengo una hermosa esposa y una luz gigante que nació para darle un nuevo sentido a nuestras vidas, ademas de tres hermosos cachorros que llenan de amor nuestro hogar.

0 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

17 + 6 =