Descripción

En este ejemplo de clase se muestra cómo usar transformaciones 3D, interpretando correctamente las coordenadas.

Características de CSS trabajadas

• Posicionamiento relativo y absoluto
• Transformaciones 3D
• Animaciones y transiciones

Rotación del cubo

Transformaciones de las caras

• front:
  transform: translateZ(100px);
• back:
  transform: translateZ(-100px) rotateY(180deg);
• left:
  transform: translateX(100px) rotateY(90deg);
• right:
  transform: translateX(-100px) rotateY(-90deg);
• top:
  transform: translateY(-100px) rotateX(90deg);
• bottom:
  transform: translateY(100px) rotateX(-90deg);