3D UI

3D UI

"Breaking the plane. Interfaces that exist in a three-dimensional, rotatable space."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. True Depth (Z-Axis Translation): Elements don't just have shadows; they physically move closer to or further from the camera.
2. Perspective: Use CSS perspective or WebGL to create realistic vanishing points.
3. Interactive Rotation: Elements should respond to mouse movement or device gyroscope by tilting or rotating in 3D space.

Visual DNA

• Colors: Bold, striking palettes like Midnight Luxury or Industrial Chic. 3D elements need high contrast to show their geometry.
• Typography: Bold, blocky, or extruded text.
• Graphics: Instead of flat icons, use rendered 3D assets (.glb, .gltf, or high-res PNGs of 3D objects).

Web Implementation

• Rely heavily on perspective, transform-style: preserve-3d, and rotateX/rotateY.
• CSS Example:

.perspective-container {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-3d {
  width: 300px;
  height: 400px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  
  /* Initial slight rotation */
  transform: rotateX(15deg) rotateY(-15deg);
}

.card-3d:hover {