Girar Z() | Consejos CSS

CSS rotateZ() La función gira un elemento alrededor de su eje z, ya sea en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. Aunque produce rotate() función, que se utiliza mejor en transformaciones 3D. esta relacionado con transform propiedad.

En la demostración, primero configuramos un escenario para los elementos 3D. perspective. Representa la proyección de un elemento 3D desde la perspectiva del espectador, indicando qué tan lejos o qué tan cerca aparece el objeto.

.stage {
  perspective: 800px;
}

Luego simulamos el efecto de caída de la moneda que gira sobre la mesa en cámara lenta, por lo que utilizamos tres funciones de transformación de rotación 3D: rotateX(), rotateY()y rotateZ().

este rotate() La abreviatura no se puede utilizar aquí porque se asigna a una matriz 2D y puede provocar que los cálculos matemáticos matriciales del navegador sean incorrectos cuando se utiliza junto con funciones 3D.

.tumbling-coin {
  animation: tumble 3s infinite linear;
}

@keyframes tumble {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);
  }
}

este rotateZ() La función se define en Módulo de transformación CSS Nivel 2 Especificación.

sintaxis

<rotateZ()> = rotateZ( ( <angle> | <zero> ) )

argumento

/* <angle> in degrees */
rotateZ(90deg)   /* Element rotates 90 degrees clockwise */
rotateZ(-180deg) /* Element rotates 180 degrees counterclockwise */

/* <angle> in turns */
rotateZ(0.25turn) /* Element makes a quater turn clockwise */
rotateZ(1turn) /* Element completes a full 360-degree rotation */

/* <angle> in radians */
rotateZ(1.57rad) /* Approximately 90 degrees clockwise */
rotateZ(-3.14rad) /* Approximately 180 degrees counterclockwise */

este rotateZ() La función requiere un <angle> Parámetro que especifica el grado de rotación del elemento alrededor del eje z.

La dirección en la que se gira el elemento depende de si el valor del ángulo es positivo o negativo.

• Los ángulos positivos giran en el sentido de las agujas del reloj, mientras que
• Rotación de ángulo negativo en sentido antihorario

este <angle> El tipo puede ser una de las siguientes cuatro unidades:

• deg: Un título es 1/360 Un círculo completo.
• grad: Un gradiente es 1/400 Un círculo completo.
• rad: Los radianes son la longitud del diámetro del círculo que rodea el arco de la forma. un radian es 180dego 1/2 Un círculo completo. Un círculo completo mide 2π radianes, que es igual a 6.2832rad o 360deg.
• turn: Un círculo es un círculo completo. Entonces, la mitad de un círculo es igual a .5turno 180deg.

Uso básico

este rotateZ() y rotate() Las funciones tienen el mismo efecto visual, pero su aplicación es más adecuada para animaciones 3D y 2D respectivamente. devolver, rotateZ() Una mejor opción para cualquier animación que requiera capas de composición de GPU, ya que está acelerada por hardware.

En esta demostración, rotateZ() ser utilizado en lugar de rotate() Aunque tienen el mismo efecto visual. Sin embargo, si hay una animación compleja en la página web que contiene una gran cantidad de elementos DOM, rotate() Puede hacer que el navegador recalcule constantemente el diseño en el hilo principal. usando rotateZ()puedes forzar al navegador a elevar ese elemento específico a su propia capa en la GPU de tu computadora, haciendo que las animaciones sean más fluidas y rápidas.

.gpu-spinner {
  animation: gpu-spin 1s linear infinite;
}

@keyframes gpu-spin {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

Ejemplo: tarjeta isométrica

Al construir efectos 3D, debes rotar elementos en múltiples ejes. mientras combina transform: rotateX(60deg) rotate(-45deg) Técnicamente factible, utilizar transform: rotateX(60deg) rotateZ(-45deg) Es el método semánticamente correcto.

.isometric-container {
  perspective: 1000px;
}

.isometric-card {
  transition: transform 0.5s ease;
  transform: rotateX(60deg) rotateZ(-45deg);
}

.isometric-card:hover {
  transform: rotateX(0deg) rotateZ(0deg) scale(1.1);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

Especificación

este rotateZ() La función se define en Módulo de transformación CSS Nivel 2 Especificación.

Soporte del navegador

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

Importante