Transformaciones 2D: translación (transform:translate)
Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

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