Transformaciones 2D: translación (transform:translate)

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical., su resultado es de tipo .Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el element0 en cada dirección.

El método translate() mueve un elemento desde su posición actual (de acuerdo con los parámetros dados para el eje X y el eje Y).

transform:traslate


La función translate permite desplazar un elemento HTML indicando una medida (en porcentaje, píxeles, em, etc.) la sintaxis es:

transform: translate(tx[, ty]); /* ej. translate(50px, 100px) */
Especifica una traslación 2D dada por el vector [tx, ty].

Si ty no es especificada, se asumirá que su valor es cero. Cada translation-value puede ser un valor de longitud o un valor de porcentaje. También disponemos de las funciones translateX y translateY para los casos donde solo debemos trasladar en x o y

  • translateX Translada un elemento a lo largo del eje X.

transform: translateX(tx); /* ej. translateX(50px) */
  • translateY Translada un elemento a lo largo del eje Y.

transform: translateY(ty); /* ej. translateY(100px) */

La función translate permite desplazar un elemento HTML indicando una medida (en porcentaje, píxeles, em, etc.) la sintaxis es:

Elemento {
transform: translate(valorx ,valory);
}

Por ejemplo si queremos trasladar 25 píxeles en "x" y 10 píxeles en "y" luego debemos codificar:

#recuadro1{
-ms-transform: translate(25px,10px);
-webkit-transform: translate(25px,10px);
-moz-transform: translate(25px,10px);
-o-transform: translate(25px,10px);
transform: translate(25px,10px);

border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}

Si vemos el primer recuadro tiene aplicada la traslación:

transform:translate