Funções Matemáticas CSS: Um Guia para cos() e sin()

As funções trigonométricas CSS transformaram a forma como criamos layouts complexos e animações sem JavaScript. Entre essas ferramentas poderosas, cos() e sin() destacam-se como funções essenciais para layouts circulares, padrões de ondas e animações suaves.

Entendendo CSS cos() e sin() Através do Círculo Unitário

As funções CSS cos() e sin() mapeiam ângulos para coordenadas usando o conceito de círculo unitário. Pense no círculo unitário como um círculo com raio 1, centralizado na origem de um sistema de coordenadas.

• cos() retorna a coordenada X para um determinado ângulo
• sin() retorna a coordenada Y para um determinado ângulo

Quando você passa um ângulo para essas funções matemáticas CSS, elas retornam valores entre -1 e 1, representando posições no círculo unitário. Essa relação matemática torna-se a base para criar layouts CSS dinâmicos.

/* Sintaxe básica */
.element {
  --angle: 45deg;
  --x: cos(var(--angle)); /* Retorna ~0.707 */
  --y: sin(var(--angle)); /* Retorna ~0.707 */
}

Criando Layouts Circulares com Funções Trigonométricas CSS

Uma das aplicações mais práticas de CSS cos() e sin() é posicionar elementos ao redor de um círculo. Essa técnica elimina a necessidade de posições fixas codificadas ou cálculos JavaScript.

.circular-menu {
  --radius: 150px;
  --total-items: 6;
}

.menu-item {
  --angle: calc(360deg / var(--total-items) * var(--index));
  transform: 
    translateX(calc(cos(var(--angle)) * var(--radius)))
    translateY(calc(sin(var(--angle)) * var(--radius)));
}

Essa abordagem distribui automaticamente os elementos de forma uniforme ao redor de um círculo, tornando-a perfeita para menus radiais, mostradores de relógio ou layouts decorativos. O conceito de círculo unitário CSS escala naturalmente com qualquer valor de raio que você escolher.

Construindo Padrões de Ondas e Animações CSS Oscilatórias

As funções trigonométricas CSS se destacam na criação de padrões de ondas orgânicas. Como sin() e cos() produzem oscilações suaves, são ideais para animações CSS semelhantes a ondas sem keyframes complexos.

.wave-element {
  --frequency: 2;
  --amplitude: 50px;
  --phase: calc(var(--index) * 30deg);
  
  transform: translateY(
    calc(sin(var(--phase) * var(--frequency)) * var(--amplitude))
  );
}

Para ondas animadas, combine essas funções com propriedades personalizadas CSS e animações:

@property --progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.oscillating {
  --wave: calc(sin(var(--progress) * 360deg) * 100px);
  transform: translateX(var(--wave));
  animation: wave-motion 2s linear infinite;
}

@keyframes wave-motion {
  to { --progress: 1; }
}

Desempenho e Suporte dos Navegadores

As funções matemáticas CSS, incluindo cos() e sin(), agora têm suporte baseline em todos os principais navegadores. Essas funções são nativamente otimizadas dentro do pipeline de renderização do navegador, proporcionando melhor desempenho do que cálculos baseados em JavaScript para layouts CSS e animações.

Principais vantagens:

• Nenhuma sobrecarga de JavaScript em tempo de execução
• Os cálculos acontecem durante a fase de computação de estilo
• Recalculação automática em mudanças de viewport ou propriedades
• Animações suaves a 60fps quando combinadas com transforms CSS

Dicas de Implementação Prática

Ao trabalhar com funções trigonométricas CSS, lembre-se dessas melhores práticas:

1. Use propriedades personalizadas CSS para valores reutilizáveis e manutenção mais fácil
2. Combine com calc() para escalar resultados da faixa de -1 a 1 do círculo unitário
3. Aproveite as propriedades transform para animações aceleradas por hardware
4. Considere unidades responsivas como vw ou cqi para layouts escaláveis

/* Layout circular responsivo */
.item {
  --responsive-radius: min(40vw, 300px);
  --x: calc(cos(var(--angle)) * var(--responsive-radius));
  --y: calc(sin(var(--angle)) * var(--responsive-radius));
  transform: translate(var(--x), var(--y));
}

Conclusão

As funções CSS cos() e sin() trazem precisão matemática para layouts web sem dependências JavaScript. Desde menus de navegação circulares até animações de ondas suaves, essas funções matemáticas CSS oferecem desempenho nativo do navegador e código mais limpo e de fácil manutenção. À medida que o suporte dos navegadores continua a se consolidar, as funções trigonométricas CSS estão se tornando ferramentas essenciais para layouts CSS modernos e animações.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..