Traducir() | Consejos CSS

CSS translate() La función mueve un elemento desde su posición preestablecida en un plano bidimensional. De esta forma, podemos reposicionar elementos horizontal, vertical o ambas.

.parent:hover .box {
  transform: translate(50px, 50%);
}

Pase el cursor sobre el cuadro para verlo moverse el 50 % de su ancho hacia la izquierda:

Junto con otras funciones de transformación, se utiliza internamente. Convertir propiedad.

este translate() La función está definida en Módulo de transformación CSS Nivel 1 borrador.

sintaxis

este translate() La sintaxis de la función es la siguiente:

<translate()> = translate( <length-percentage>, <length-percentage>? )

…es sólo una forma elegante de decir que podemos mover (traducir) un elemento una longitud, dos o un porcentaje. Discutiremos algunos ejemplos más adelante. Pero primero:

argumento

/* Single argument */
translate(100px) /* moves 100px to the right */
translate(-100%) /* moves 100% of the element's width to the left */

/* Double argument */
translate(50px, 100px) /* moves 50px down, then 100px to the right */
translate(50%, 100%) /* moves 50% of the element's width downwards, then 100% its height to the right */

este translate() La función requiere dos <length-percentage> parámetro(tx, tycomo “panorámica horizontal” y “panorámica vertical”). Estos le indican al navegador cuánto mover el elemento y en qué dirección (positiva o negativa).

• tx:Especifique el desplazamiento en el eje horizontal. Si es positivo, el elemento está funcionando correctamente. Si es negativo, el elemento se mueve hacia la izquierda.
• ty (Electivo):Especifique el desplazamiento en el eje vertical. Si es positivo, el elemento se mueve hacia abajo, si es negativo, el elemento se mueve hacia arriba.

Si solo se pasa un argumento, se supone que es tx. Alternativamente, cuando se pasan ambos parámetros, el segundo parámetro será ty. Juntos mueven elementos en diagonal.

También notarás que podemos usar <length> o <percentage> valores. uno <length> El valor es absoluto, mientras que un <percentage> Los valores son relativos al ancho del elemento (por tx) o altura (para ty).

Uso básico

Aunque tenemos muchos métodos Centrar elementos en CSSdurante la mayor parte de su historia, nuestra mejor manera de centrar elementos absolutos fue usar translate() Función.

El proceso es el siguiente: dado un elemento absoluto, normalmente lo movemos al centro usando top: 50% y left: 50%. Sin embargo, estos sólo anclan la esquina superior izquierda del elemento al centro, no el elemento en sí. Para resolver este problema utilizamos transform: translate(-50%, -50%) Mueve el elemento hacia atrás la mitad de su ancho y alto.

.modal-center {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) scale(0.9);
}

Recientemente, podemos usar conocido justify-self y align-self característica. Alternativamente, podemos usar la semántica. dialog El modal está centrado por defecto.

movimiento diagonal

este translateX() La función mueve elementos horizontalmente, mientras translateY() Maneja el eje vertical. Si queremos movimiento diagonal podemos combinar los dos o usar el más corto. translate() Función.

Un caso de uso común es traducir elementos a la página desde cualquier esquina. Por ejemplo, si tenemos un Componente tostado y queremos que se deslice desde la esquina inferior derecha, podemos mover el elemento a bottom y right propiedades y luego compensarlas de la página translate().

.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;

  transform: translate(40px, 40px);
  transition: transform 0.28s ease;
}

Entonces, cuando un .show Cuando se activa una categoría, translate() Los valores se restablecen, haciendo que se deslicen en diagonal:

.toast.show {
  opacity: 1;
  transform: translate(0, 0);
}

No afecta a otros elementos

este translate() Función, igual que otros. transform funciona y no afecta el flujo de archivos. En cambio, mueve visualmente el elemento trasladado a su nueva posición sin empujar los elementos circundantes o los elementos a su nueva posición. Además, el espacio que ocupaba originalmente el elemento permanece en el diseño, como si no se hubiera movido en absoluto.

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translate(80px, 40px);
}

Tenga en cuenta que mover el elemento Traducir no hace que los elementos Cuadro 1 o Cuadro 2 junto a él se muevan.

a diferencia de marginque puede provocar reflujo o mover elementos adyacentes, translate() Sólo se cambia la posición del elemento de presentación visual.

Problema con pseudoclases de puntero

usar translate() directamente en la pseudoclase del puntero, p. :hover A veces esto conduce a malas interacciones. Cuando el elemento se traslada lo suficientemente lejos del cursor, :hover El estado termina, haciendo que el elemento regrese inmediatamente a su posición original. El cursor todavía está flotando en su posición, por lo que se desplaza nuevamente, provocando un ciclo de parpadeo continuo.

Una solución simple es colocar el elemento a traducir en un contenedor principal y aplicar una pseudoclase (:hover) al elemento padre, mientras que el elemento principal toma la función de traducción.

/* Problem case */
.bad:hover {
  transform: translateX(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateX(160px);
}

demostración

Especificación

CSS translate() La función está definida en Módulo de transformación CSS Nivel 1actualmente en borrador editorial.

Soporte del navegador

este translate() Las funciones tienen soporte básico en todos los navegadores modernos.

lectura adicional

Importante