Traducir Z() | Consejos CSS

CSS translateZ() La función aumenta la profundidad de un elemento, acercándolo o alejándolo en el espacio. En otras palabras, mueve el elemento a lo largo del eje Z en el espacio 3D.

.box:hover {
  transform: translateZ(100px);
}

.box.perspective:hover {
  transform: perspective(500px) translateZ(100px);
}

Cualquiera perspective() función o perspective la propiedad es necesaria translateZ() Ve a trabajar. Sin uno de los dos, ninguno será efectivo.

Active el interruptor en la demostración a continuación, luego coloque el cursor sobre el cuadro para verlo más de cerca:

Aunque parece .box “El elemento se hace más grande” al pasar el mouse, pero ese no es el caso. Cuando pasas el mouse sobre el cuadro, en realidad se mueve. íntimamente Dándote 100 píxeles de longitud para que parezca más grande. Entraremos en más detalles sobre esto más adelante para que sea más obvio lo que está sucediendo allí.

translateZ() No debe confundirse con un sustituto. scale() función o scale propiedad. Perspectiva y escala son dos conceptos diferentes.

este translateZ() La función está definida en Módulo de transformación CSS Nivel 2 Especificación

sintaxis

translateZ() = translateZ(<length>)

este translateZ() La función requiere un <length> Un parámetro que define qué tan lejos está el elemento del frente de la pantalla. esta relacionado con transform propiedad

argumento

/* Positive lengths */
transform: translateZ(100px);
transform: translateZ(5rem);

/* Negative lengths */
transform: translateZ(-50px);
transform: translateZ(-8em);

este translateZ() La función toma un solo parámetro:

• <length>: La distancia entre el elemento y el frente de la pantalla. Cuando es positivo, el elemento se acerca al usuario, y cuando es negativo, el elemento se aleja del usuario.

como funciona

este translateZ() La función es complicada porque mueve el elemento a lo largo del eje Z y no se nota visualmente en el navegador. Dado que los navegadores solo representan elementos en función de su altura y ancho y no de su profundidad, translateZ() Puede parecer que la función no hace nada.

Para mostrar su profundidad y sombra necesitamos usar perspective propiedad o perspective() Función. Además, también podemos configurar transform-style llegar preserve-3d El valor de su elemento principal, que le permite a CSS saber que el elemento secundario debe ubicarse en 3D.

Proyección y perspectiva

En un sitio web no hay sensación de profundidad, de “cercanía” o “lejanía”, porque los elementos están aplanados en una pantalla 2D. Cualquiera translate(200px) o translate(20px)percibimos elementos a la misma distancia, por lo que no hay perspectiva alguna a menos que la habilitemos explícitamente. Para ilustrar esto, considere el siguiente HTML:

<div class="scene">
  <div class="parent">
    <div class="box">translateZ(100px)</div>
  </div>
</div>

Primero, habilitaremos algunas perspectivas a lo largo de la escena:

.scene {
  perspective: 800px;
}

Entonces estableceremos transform-style llegar preserve-3d en el padre, por lo que el hijo también será transformado en 3D:

.parent {
  transform-style: preserve-3d;
}

ahora nos movemos .box 100px Más cerca de los usuarios translateZ().

.box {
  transform: translateZ(100px);
}

Aunque la caja parece grande 100px Dimensivamente, cuando giras el padre hacia un lado, verás .box El tamaño no ha aumentado, pero la distancia entre .parent y .box En efecto.

perspective y perspective()

Ambos hacen el mismo trabajo: Define la proyección del elemento. este perspective Las propiedades se aplican al padre de todos los elementos 3D, mientras que perspective() Las funciones solo se pueden aplicar a un único elemento 3D y deben declararse antes de la función de transformación 3D.

este perspective propiedad

.parent {
  perspective: 800px;
}

.child-1 {
  transform: translateZ(200px); /* Defined within a projection of 800px */
}

.child-2 {
  transform: translate3D(100px, 200px, 150px); /* Defined within a projection of 800px */
}

este perspective() Función

.element {
  transform: translateZ(100px) perspective(800px); /* Nope ❌ */
}

.element {
  transform: perspective(800px) translateZ(100px); /* Yep ✅ */
}

También se puede utilizar para optimizar el rendimiento de la red.

sabes que puedes usar translateZ() ¿Funciones para mejorar el rendimiento de nuestro sitio web? Uso de la función de transformación CSS 3D procesador de gráficos,Comparar UPC Se utiliza para la representación de elementos. Este truco de rendimiento evita el parpadeo durante la animación y hace que las transiciones sean más suaves.

Desarrollador agregado translateZ(0) Mejore el rendimiento moviendo el renderizado de la CPU a la GPU. Si tienes problemas con los fallos de animación, ¡ahora puedes solucionarlos!

demostración

Especificación

este translateZ() La función está definida en Módulo de transformación CSS Nivel 2 Especificación.

Soporte del navegador

este translateZ() Esta característica funciona en todos los navegadores modernos.

referirse a

¡Más información sobre transformaciones 3D!

Importante