Design Isométrico

"A visão do arquiteto. Uma projeção paralela onde a profundidade é constante e as linhas paralelas nunca convergem."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência secundária da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Linhas Paralelas: Diferente do 3D real, a projeção isométrica não tem ponto de fuga. Tudo é visto de um ângulo exato de 30 graus.
2. Visão de Cima para Baixo, Angulada: A perspectiva clássica de "SimCity".
3. Arquitetura Blocada: Elementos de UI frequentemente parecem quarteirões de cidade ou blocos empilhados.

DNA Visual

• Cores: Tech Quente ou Elegância Terrena. Designs isométricos frequentemente parecem modelos físicos, então cores realistas e ligeiramente suaves funcionam bem.
• Tipografia: Mantenha o texto plano na tela, ou mapeie-o perfeitamente aos planos isométricos (superior, esquerdo, direito).
• Sombras: Sombras projetadas duras e longas em um ângulo exato (geralmente -45 ou 45 graus).

Implementação Web

• Transformações CSS são perfeitas para isso. Combine rotateX(60deg) e rotateZ(-45deg).
• Exemplo CSS:

.isometric-grid {
  /* The foundation */
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
}

.iso-block {
  width: 100px;
  height: 100px;
  background-color: var(--secondary-base);
  position: relative;
  transition: transform 0.3s;
}

/* Creating the 3D block with pseudo-elements */
.iso-block::before {
  content: '';
  position: absolute;
  width: 20px; /* Depth */
  height: 100%;
  background-color: var(--primary-text); /* Darker shade for side */
  right: 100%;
  transform-origin: right;
  transform: skewY(-45deg);
}

.iso-block::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 20px; /* Depth */
  background-color: var(--cta-highlight); /* Lightest shade for top/bottom */
  top: 100%;
  transform-origin: top;
  transform: skewX(-45deg);
}

.iso-block:hover {
  transform: translateZ(20px) translate(-10px, -10px);
}

Implementação de App

SwiftUI

struct IsometricView: View {
    var body: some View {
        ZStack {
            Color.white.ignoresSafeArea()
            
            // Isometric Stack
            VStack(spacing: 0) {
                // Top layer
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: 150, height: 150)
                    .overlay(Text("TOP").foregroundColor(.white))
                
                // Shadow simulation
                Rectangle()
                    .fill(Color.black.opacity(0.2))
                    .frame(width: 150, height: 20)
            }
            // The exact 3D transformations for Isometric projection
            .rotationEffect(.degrees(-45))
            .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))
        }
    }
}

• O .rotation3DEffect do SwiftUI torna isso surpreendentemente fácil. Rotacione Z em -45 graus primeiro (via .rotationEffect), depois rotacione X em 60 graus.
• Você pode empilhar múltiplas views ao longo do eixo Z (ou simulá-lo com offsets Y antes da rotação 3D) para criar blocos de cidade isométricos imponentes.

Flutter

import 'dart:math';

class IsometricScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Transform(
          // The Isometric Matrix Math
          alignment: FractionalOffset.center,
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001) // perspective
            ..rotateX(pi / 3) // 60 degrees
            ..rotateZ(-pi / 4), // -45 degrees
          child: Container(
            width: 150,
            height: 150,
            decoration: BoxDecoration(
              color: Colors.blue,
              boxShadow: [
                // Hard isometric drop shadow
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: const Offset(20, 20),
                  blurRadius: 0, // No blur for isometric
                ),
              ],
            ),
            child: const Center(child: Text('ISO BLOCK', style: TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

• Transform com Matrix4 é necessário no Flutter. Aplicar rotateX e rotateZ resulta na grade isométrica clássica.

…