TraducirX() | Consejos CSS

CSS translateX() La función mueve un elemento horizontalmente en una cantidad específica. En concreto, mueve el elemento hacia la derecha o hacia la izquierda, dependiendo de si el valor es positivo o negativo.

.parent:hover .box {
  transform: translateX(50%);
}

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

se define en Módulo de transformación CSS Nivel 1 borrador.

sintaxis

este translateX() La sintaxis de la función es simple y tiene este aspecto:

<translateX()> = translateX( <length-percentage> )

O, en inglés sencillo: Traduce (o mueve) este elemento horizontalmente hasta aquí.

argumento

/* <length> */
translateY(80px) /* Element moves 80px to the bottom */
translateY(-24ch) /* Element moves 24ch to the top */

/* <percentage> */
translateY(50%) /* Element moves 50% of the element's height downward */
translateY(-100%) /* Element moves 100% of the element's height upward */

este translateX() La función requiere un <length-percentage> Los parámetros especifican qué tan lejos mover el elemento y en qué dirección, ya sea hacia la izquierda (negativa) o hacia la derecha (positiva).

Los parámetros pasados ​​pueden ser <length> o un <percentage>:

• <length>: cuando es positivo, diga 50pxel elemento se mueve 50 píxeles hacia la derecha. Por otra parte, en el siguiente caso -40chel elemento se mueve 40 caracteres hacia la izquierda.
• <percentage>: Los porcentajes son relativos al ancho del elemento. Entonces, por un 400pxelemento ancho, translateX(50%) muévelo 200px a la derecha, al mismo tiempo translateX(-50%) muévelo 200px A la izquierda.

Uso básico

podemos usar translateX() Las funciones permiten que los elementos se deslicen en una página web de diversas formas. Por ejemplo, una barra lateral que se desliza desde la izquierda (o derecha) cuando se hace clic en un botón de menú. Para lograr esto, primero movemos la barra lateral completamente fuera de la página:

.sidebar {
  transform: translateX(-100%);
  transition: transform 0.2s ease-in;
}

Luego, con un poco de JavaScript, podemos alternar .open Esta categoría se llama cada vez que el usuario hace clic en el botón de menú. Esto moverá la barra lateral desde la izquierda hacia la página:

.sidebar.open {
  transform: translateX(0);
}

Ejemplo: marquesina infinita

Los subtítulos en el desarrollo web son componentes de banners de información de desplazamiento automático. En la mayoría de los sitios web, se utilizan para mostrar el logotipo de una empresa, tal vez un patrocinador o un cliente, o en este caso, anunciar un nuevo producto en un sitio de comercio electrónico.

Al igual que en el ejemplo anterior, podemos usar translateX() Función para componente de marquesina de desplazamiento suave:

.marquee-content {
  animation: marquee-scroll 20s linear infinite;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

este marquee-scroll El fotograma clave define cómo el widget se desplaza desde una fase de inicio a una fase de parada, donde el widget se mueve la mitad de su ancho hacia la izquierda.

Para que se desplace infinitamente, animation-iteration-count empezar a infinite En animation Atributo taquigráfico.

Ejemplo: animación de diseño de esqueleto

cargador esqueleto Actúa como marcadores de posición hasta que el contenido principal los carga y los reemplaza, evitando así cambios inesperados en el diseño. Pueden ser divs grises estáticos de diferentes formas y tamaños con el contenido original, o podemos hacerlos más interesantes con un efecto de brillo.

usar ::after Pseudo elemento, podemos establecer un valor predeterminado transform: translateX(-120%);luego usa shimmer animación para moverlo .skeleton Porciones ilimitadas.

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;

  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, var(--skel-highlight), transparent);
  animation: shimmer 1.15s linear infinite;
}

este shimmer El fotograma clave mueve los pseudoelementos de -120% (Dejando el elemento de la izquierda) a 120% (fuera de la página de la derecha) y empezar de nuevo

@keyframes shimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

No afecta a otros elementos

este translateX() 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: translateX(80px);
}

Tenga en cuenta que el elemento “Traducido” no hace que los elementos del Cuadro 1 o del Cuadro 3 se muevan cuando se mueven.

a diferencia de margin 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 translateX() directamente en la pseudoclase del puntero, p. :hover A veces rompe la interacción. En el caso de que el elemento se traslade lejos del cursor, :hover Se pierde el estado, lo que hace que el elemento se restablezca inmediatamente a su posición original. En la posición inicial, el cursor está allí, por lo que se traslada 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 usa la función de traducción.

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

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

Especificación

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

Soporte del navegador

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

Importante