Pure CSS Isometric Floating Layers Diagram

This Isometric Floating Layers Diagram is a visually striking React component designed to represent architectural stacks or multi-tiered systems. By combining SVG geometry with CSS animations, it creates a lightweight 3D isometric illusion. Each layer floats rhythmically, enhanced by vibrant gradients and drop shadows, making it perfect for landing pages explaining software infrastructure or service tiers.

Core Technique

The component relies on manually calculated SVG paths to simulate depth, rather than webGL or heavy 3D libraries.

1. Isometric Geometry: The Layer component draws a polygon using the <path> element. The coordinates d are calculated based on a size prop, drawing a top diamond face and two side faces to create a “slab” look.
2. Text Skewing: To make the text lie flat on the isometric plane, CSS transforms are applied: skew(-68deg, 22deg) scaleY(0.5). This distorts the standard text to align perfectly with the perspective of the SVG paths.
3. CSS Composition: React passes positioning data via inline styles (CSS variables --offset-x, --offset-y). The CSS then uses these variables in a transform property, while a separate @keyframes hover animation adds the vertical bobbing motion without disrupting the base position.

Customization

You can control the appearance of each layer by passing props to the <Layer /> component within the main app.

<Layers>
  {/* 
      gradient: [Start Color, End Color] 
      offset: [x, y, z] - Position adjustment
      size: Relative width of the layer 
  */}
  <Layer 
    text='Database' 
    gradient={['#FF5722', '#FF8F00']} 
    offset={[0, 50, 0]} 
    size={60}
  />
</Layers>

To adjust the floating animation speed or distance, modify the CSS keyframes:

@keyframes hover {
  0%, 100% {
    /* Base position */
    transform: translateX(var(--offset-x)) translateY(var(--offset-y));
  }
  50% {
    /* Float up by 10px */
    transform: translateX(var(--offset-x)) translateY(calc(var(--offset-y) - 10px));
  }
}