Curso gratuito de CSS

3D
Scroll

Demo de transformaciones 3D vinculadas al scroll con CSS: perspectiva, rotaciones, profundidad Z y rangos de animación.

Haz scroll

01 - rotateY / rotateX

Cards que giran al entrar

Desde la izquierda

rotateY(-90deg) hasta 0

Desde arriba

rotateX(90deg) hasta 0

Desde la derecha

rotateY(90deg) hasta 0

02 - cubo 3D girando

transform-style: preserve-3d

FRONT
BACK
LEFT
RIGHT
TOP
BOT
03 - profundidad Z

Cards apiladas en el eje Z

Primera card
Segunda card
Tercera card
04 - texto en 3D

Palabras que vuelan

CSS 3D
El código clave 
/* Tres piezas para entender la demo */

#scroller {
  scroll-timeline-name: --page;
  scroll-timeline-axis: block;
}

.scene {
  perspective: 800px;
}

.elemento {
  transform-style: preserve-3d;
  animation: entrar linear both;
  animation-timeline: --page;
  animation-range: 10% 30%;
}

@keyframes entrar {
  from { transform: rotateY(-90deg) translateZ(-60px); opacity: 0; }
  to { transform: rotateY(0deg) translateZ(0); opacity: 1; }
}