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>
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
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>
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" >
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>
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);
}
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;
}
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;
}
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.
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);
}
Eso es todo por el día de hoy, espero les haya sido de utilidad este simple y pequeño calentamiento de neuronas.