viernes, 30 de mayo de 2014

El desplazamiento



1. En los dos ejes

La función translate permite realizar un desplazamiento, una translación, de una distancia determinada, en función de la posición inicial y del punto de referencia.

El siguiente ejemplo desplaza la imagen de 250 píxeles horizontalmente y de 50 píxeles verticalmente.

.desplazamiento {
-moz-transform: translate(250px,50px);
-webkit-transform: translate(250px,50px);
-o-transform: translate(250px,50px);
transform: translate(250px,50px);
}

Hemos aplicado la clase a una imagen:

<p><img src="leon.jpg" alt="León" class="desplazamiento" /></p>

Veamos el resultado de la transformación:


2. En un eje solamente

Podemos usar las dos funciones de desplazamiento en un único eje: 
  • translateX: para un desplazamiento en el eje horizontal, 
  • translateY: para un desplazamiento en el eje vertical.

Ejemplo de un desplazamiento horizontal de 20 píxeles:

.desplazamiento {
-moz-transform: translateX(20px);
-webkit-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}


Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada