UI 3D

"Quebrando o plano. Interfaces que existem em um espaço tridimensional e rotacionável."

Quando Usar

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

Princípios Fundamentais

1. Profundidade Real (Translação no Eixo Z): Os elementos não apenas têm sombras; eles se movem fisicamente para mais perto ou mais longe da câmera.
2. Perspectiva: Use perspectiva CSS ou WebGL para criar pontos de fuga realistas.
3. Rotação Interativa: Os elementos devem responder ao movimento do mouse ou ao giroscópio do dispositivo, inclinando-se ou girando em um espaço 3D.

DNA Visual

• Cores: Paletas ousadas e marcantes como Midnight Luxury ou Industrial Chic. Elementos 3D precisam de alto contraste para mostrar sua geometria.
• Tipografia: Texto em negrito, blocos ou extrudado.
• Gráficos: Em vez de ícones planos, use ativos 3D renderizados (.glb, .gltf ou PNGs de alta resolução de objetos 3D).

Implementação Web

• Confie muito em perspective, transform-style: preserve-3d e rotateX/rotateY.
• Exemplo CSS:

.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 {
  /* Straighten out on hover */
  transform: rotateX(0) rotateY(0) translateZ(50px);
}

/* Inner elements popping out */
.card-content {
  transform: translateZ(30px); /* Pushes content 30px closer to viewer */
}

Implementação de Aplicativos

SwiftUI

struct Card3D: View {
    @State private var dragOffset = CGSize.zero
    
    var body: some View {
        VStack {
            Text("3D Card")
                .font(.largeTitle.bold())
                .foregroundColor(.white)
        }
        .frame(width: 300, height: 400)
        .background(
            LinearGradient(colors: [.blue, .purple], startPoint: .topLeading, endPoint: .bottomTrailing)
        )
        .cornerRadius(24)
        .shadow(radius: 20)
        // Magic 3D effect based on drag gesture
        .rotation3DEffect(
            .degrees(Double(dragOffset.width / 10)),
            axis: (x: 0, y: 1, z: 0),
            perspective: 0.5
        )
        .rotation3DEffect(
            .degrees(Double(-dragOffset.height / 10)),
            axis: (x: 1, y: 0, z: 0),
            perspective: 0.5
        )
        .gesture(
            DragGesture()
                .onChanged { value in
                    withAnimation(.interactiveSpring()) {
                        dragOffset = value.translation
                    }
                }
                .onEnded { _ in
                    withAnimation(.spring()) {
                        dragOffset = .zero
                    }
                }
        )
    }
}

• O SwiftUI torna isso incrivelmente fácil com .rotation3DEffect().
• Use o parâmetro perspective (padrão 1/6, maior = mais distorcido) para controlar a distância da câmera.
• Vincule os eixos de rotação (x, y) a gestos de arrastar ou CoreMotion (giroscópio) para UI 3D interativa.

Flutter

class Card3D extends StatefulWidget {
  @override
  State<Card3D> createState() => _Card3DState();
}

class _Card3DState extends State<Card3D> {
  Offset _offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() => _offset += details.delta);
      },
      onPanEnd: (_) {
        setState(() => _offset = Offset.zero); // Voltar ao normal
      },
      child: TweenAnimationBuilder(
        tween: Tween<Offset>(begin: Offset.zero, end: _offset),
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeOut,
        builder: (context, Offset offset, child) {
          // Matriz de Perspectiva
          final transform = Matrix4.identity()
            ..setEntry(3, 2, 0.001) // perspectiva
            ..rotateX(-offset.dy * 0.01)
            ..rotateY(offset.dx * 0.01);

          return Transform(
            transform: transform,
            alignment: FractionalOffset.center,
            child: Container(
              width: 300,
              height: 400,
              decoration: BoxDecoration(
                gradient: const LinearGradient(colors: [Colors.blue, Colors.purple]),

…