El desplazamiento

Regresar al índice

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!

Regresar al índice

Twittear