Girar Y() | Consejos CSS

CSS rotateY() La función gira el elemento alrededor de su eje y vertical. Específicamente, voltea elementos horizontalmente de izquierda a derecha (o de derecha a izquierda). esta relacionado con transform propiedad.

El eje y es el eje de rotación, por lo que el elemento gira horizontalmente. Imagine un alfiler pegado en la parte superior de un elemento que solo puede girar hacia la izquierda o hacia la derecha.

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

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

sintaxis

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

argumento

/* <angle> in degrees */
rotateY(90deg)   /* Element rotates 90 degrees to the right */
rotateY(-180deg) /* Element rotates 180 degrees to the left */

/* <angle> in turns */
rotateY(0.5turn) /* Element rotates 180 degrees (half a full rotation) */
rotateY(1turn)   /* Element completes a full 360-degree rotation */

/* <angle> in radians */
rotateY(1.57rad) /* Approximately 90 degrees to the right */
rotateY(-3.14rad) /* Approximately 180 degrees to the left */

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

• <angles>: valor como 45deg, 0.5turn, -90deg, 1.57radesperar. En un ángulo positivo, el borde derecho del elemento gira alejándose de usted (el elemento aparece girado hacia la derecha). Cuando el ángulo es negativo, el borde izquierdo gira y el elemento parece girar hacia la izquierda.

este <angle> Hay cuatro tipos de unidades para elegir:

• 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

Tenemos que discutir esto primero porque para cualquier 3D transform función para crear efectos 3D visibles, debe configurar perspective Propiedad en el elemento padre. perspective Define la proyección de un elemento 3D desde el ojo del espectador.

Un valor más bajo (p. ej. 400px) hace que los elementos 3D parezcan más cercanos, mientras que los valores más altos (p. ej. 2000px) hace que parezca más lejano, reduciendo la visibilidad del efecto 3D.

.parent {
  perspective: 1000px;
}

.card {
  transform: rotateY(45deg);
}

Sin perspectiva, las rotaciones aparecerán planas y reducidas, y la profundidad 3D no será visible.

cuando con perspectiveparece ligeramente inclinado hacia la derecha

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. rotateY() Crear una tarjeta invertida horizontal que revele el contenido en la parte posterior cuando se hace clic o se coloca el cursor sobre ella. Para realizar uno, primero configuramos el escenario 3D y la proyección a través de la aplicación. transform-style llegar preserve-3d; a kahe perspective llegar 1000px; 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);
}

A continuación, colocamos el anverso y el reverso de la tarjeta absolutamente dentro del contenedor, fijando backface-visibility llegar hidden. Evita que se muestre el contenido de cada cara cuando se gira hacia el otro lado.

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

También necesitamos rotar previamente la parte trasera. 180deg. Esto garantiza que la parte posterior sea legible cuando se gira y se ve desde el frente.

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

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

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

Ejemplo: carrusel de imágenes

este rotateY() Esta función también es excelente para crear carruseles de imágenes en 3D que muestren productos o galerías. Cada elemento se puede colocar alrededor del cilindro y girar para revelarlo al público.

De nuevo como siempre montamos el escenario 3D. perspective y preserve-3d.

.carousel {
  perspective: 1200px;
}

.carousel-container {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

Después de eso, intentamos localizar todos .carousel-item en el centro .carousel-container usar absolute posición

.carousel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Posteriormente los reposicionamos para formar un cilindro alrededor .carousel-container usar rotateY(calc(var(--n) * 72deg))que impulsa cada proyecto hacia adelante translateZ(400px)sin el cual estos proyectos se exprimirían entre sí.

400px Se utiliza como radio del cilindro. Probé 100 radios diferentes para ver cuál haría que cada elemento apareciera individualmente, y 400px ganado.

.carousel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(calc(var(--n) * 72deg)) translateZ(400px);
}

cada .carousel-item Hay una variable, --n: xDónde x es de 0 llegar 4. Con un total de cinco proyectos, encontramos el ángulo perfecto. rotateY() función de división 360deg (círculo completo) por 5 Llegar 72deg

Ahora usamos JavaScript para rotar. .carousel-container pasar a través 72deg Al hacer clic en los botones “Siguiente” y “Anterior”. Esto empujará el panel anterior o siguiente hacia el frente, dependiendo del botón en el que haga clic.

let currentRotation = 0;
const anglePerItem = 72;

function rotateCarousel(direction) {
  currentRotation += direction * anglePerItem;
  carouselContainer.style.transform = `rotateY(${currentRotation}deg)`;
}

nextBtn.addEventListener("click", () => {
  rotateCarousel(1);
});

prevBtn.addEventListener("click", () => {
  rotateCarousel(-1);
});

Ejemplo: pasar páginas

¿Recuerdas esas cartas volteadas horizontalmente que vimos antes? Podemos construir encima de él para que parezca las páginas de un libro al pasar.

queremos agregar transform-origin su propiedad. Define el punto en el eje en el que se produce la rotación. De forma predeterminada, está en el centro, que es lo que hemos usado hasta ahora, pero lo cambiaremos aquí para left center. La nueva posición permite voltear el elemento desde el centro en el borde izquierdo, como en un libro, en lugar de desde el centro principal en el efecto de tarjeta invertida.

.page {
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

este rotateY() función, cuando se utiliza con transform-origin: left center;que puede crear efectos realistas de paso de página para libros digitales, portafolios o interfaces de narración.

debes saber como usarlo rotateY() Ahora, pasemos a la parte mágica. Sólo se anima la página correcta, así que ese es el punto de la transformación. dimos .page uno transform-origin de left center; Entonces gira sobre el eje vertical alrededor del centro del extremo izquierdo.

Entonces, cuando .turning La clase se activa cuando se hace clic en la página, rotateY(-180deg) Gírelo alrededor de un punto de rotación definido.

.page.turning {
  transform: rotateY(-180deg);
}

Para evitar que se muestre el contenido del anverso y reverso de la página, utilizamos backface-visibility: hidden; Escóndelo cuando se voltee.

.page-front,
.page-back {
  backface-visibility: hidden;
}

Además, giramos previamente la parte posterior para que el contenido no se voltee cuando se gira hacia el espectador.

.page-back {
  transform: rotateY(180deg);
}

Especificación

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

Soporte del navegador

este rotateY() Todos los navegadores modernos admiten esta función.

Importante