GirarX() | Consejos CSS

CSS rotateX() La función gira un elemento alrededor del eje x en un espacio tridimensional. Específicamente, voltea el elemento verticalmente, inclinándolo hacia atrás o hacia adelante, según el ángulo establecido. Es una de las muchas funciones de transformación utilizadas en aplicaciones. transform propiedad.

El eje x es el eje de rotación, por lo que el elemento gira verticalmente. Imagine un alfiler pegado al lado izquierdo de un elemento que solo puede girar hacia arriba o hacia abajo.

En la demostración a continuación, rotateX(0) Dado como una rotación preestablecida del elemento:

.demo-element {
  transform: rotateY(var(--deg));
  transition: transform 0.3s ease;
}

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

sintaxis

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

argumento

/* angle in degrees */
rotateX(45deg) /* rotates 45 degrees backwards */
rotateX(-90deg) /* rotates 90 degrees forwards */

/* angle in turns */
rotateX(0.5turn) /* rotates 180 degrees (half a full turn) */
rotateX(1turn)   /* Rotates a full 360-degree turn */

/* angle in radians */
rotateX(1.57rad) /* Approximately 90 degrees */

/* angle in gradians */
rotate(200grad)  /* rotates 180 degrees */

este rotateX() La función requiere un <angle> Parámetro que define cuánto gira el elemento alrededor de su eje vertical.

• <angles>: valores como 45deg, 0.5turn, -90deg, 1.57radTodos pueden pasar.
• Un ángulo positivo hace que la parte superior del elemento se incline hacia atrás y la parte inferior se incline hacia adelante.
• Los ángulos negativos no: inclinan la parte superior del elemento hacia usted y la parte inferior en dirección contraria.

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.

Establecer transformación 3D

rotateX() Es parte de la función de transformación 3D de CSS para que pueda representarse mejor en vistas 3D. para rotateX() Para producir efectos 3D visibles, debe configurar perspective Propiedad en el elemento padre. La propiedad de perspectiva determina cómo se proyecta un elemento, agregando profundidad al elemento y haciéndolo lucir natural y 3D.

En esta demostración tenemos dos controles deslizantes para controlar. rotateX() grado y perspective propiedad.

en ningún perspectiveel elemento parece extrañamente sesgado y feo.

También vale la pena establecer transform-style llegar preserve-3dque determina si los elementos secundarios del elemento se colocan en el espacio 3D o se aplanan.

Uso básico

Uno de los usos más populares. rotateX() Crear una tarjeta invertida que muestre el contenido en el reverso cuando se hace clic o se coloca el cursor sobre ella. Puede utilizar esta técnica para tablas de precios, tarjetas informativas o galerías interactivas.

Para preparar el escenario y proporcionar valores de sombra y renderizado 3D para la tarjeta, configuramos perspective y preserve-3d El estilo del elemento padre.

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Luego colocamos el anverso y el reverso de la tarjeta absolutamente dentro del contenedor, mientras configuramos backface-visibility llegar hidden:

.flip-card-front,
.flip-card-back {
  position: absolute;
  backface-visibility: hidden;
}

A continuación, giramos previamente la parte posterior 180 grados para que quede expuesta cuando se voltea la tarjeta.

.flip-card-back {
  transform: rotateX(180deg);
}

Finalmente, cuando los padres están presentes, volteamos las cartas. :hover-ed:

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

Ejemplo: Spinner de carga 3D

También podemos crear indicadores de carga atractivos. rotateX() Función..

En este ejemplo, no sólo utilizamos rotateX() función, pero la comparamos con rotateY() Función para animación de rotación de dos ejes. Al rotar continuamente elementos horizontal y verticalmente, creamos un efecto de rotación 3D.

Una vez más, le damos al padre del elemento un perspective:

.spinner-wrapper {
  perspective: 1000px;
  margin-bottom: 2rem;
}

Luego aplicamos la animación al elemento usando CSS. animation Atributo taquigráfico.

.spinner {
  width: 80px;
  height: 80px;
  animation: spin-3d 2s ease-in-out infinite;
}

A continuación, definimos fotogramas clave, que dictan cómo gira el elemento de un punto a otro.

@keyframes spin-3d {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(180deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(360deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

orden transform Definir funciones es importante. El efecto de la primera función tiene efecto antes que la segunda función, por lo que en 25% Los elementos se voltean hasta la mitad horizontalmente antes de voltearse verticalmente, y la animación es tan fluida que apenas lo notarás.

Ejemplo: acordeón 3D

Saltemos la aburrida animación de visualización del contenido del componente de acordeón y hagamos que nuestro contenido sea un poco más interesante.

Podemos realzar el acordeón tradicional añadiendo elementos sutiles. rotateX() Gire los elementos a medida que se expanden o colapsan, creando un efecto de caída más escalonado que atrae aún más a los usuarios y mejora la experiencia, en lugar de una simple animación de deslizar hacia abajo y hacia atrás.

De nuevo, como siempre, ponemos la perspectiva en los padres.

.accordion-item {
  perspective: 1000px;
}

Entonces, definimos transform y transform-origin. ya que queremos .accordion-content Para caer hacia el usuario, utilizamos un ángulo negativo de 90° para mover el elemento fuera del campo de visión del usuario.

Además, podemos cambiar el eje de rotación preestablecido desde el centro hacia arriba usando el siguiente comando transfom-origin: top;

.accordion-content {
  transform-origin: top;
  transform: rotateX(-90deg);
  overflow: hidden;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    max-height 0.4s ease;
}

este transform-origin:top Asegúrese de que la rotación se realice desde el borde superior para que parezca una puerta que se abre hacia abajo mientras rotateX(-90deg) Haga que el contenido parezca expandirse a la vista.

Cuando el acordeón está abierto, .accordion-content Los elementos descienden de forma escalonada hasta 0 grados, que es la posición predeterminada.

.accordion-item.open .accordion-content {
  transform: rotateX(0deg);
  opacity: 1;
  max-height: 500px;
}

Notas sobre transform-origin y rotateX()

Por defecto, rotateX() La función gira un elemento alrededor de su centro. Sin embargo, puedes cambiar este eje de rotación usando CSS. transform-origin propiedad. transform-origin Le permite cambiar cualquier origen. transform funcionalidad y por lo tanto no se limita a centerpuedes usar top center, top right, bottom leftincluso porcentajes y longitudes.

.child {
  transform: rotateX(120deg);
  transform-origin: top center;
}

Especificación

CSS rotateX() La función se define en Módulo de transformación CSS Nivel 2 borrador.

Soporte del navegador

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

Importante