Fonctions mathématiques CSS : Guide des fonctions cos() et sin()

Les fonctions trigonométriques CSS ont transformé notre façon de créer des mises en page complexes et des animations sans JavaScript. Parmi ces outils puissants, cos() et sin() se distinguent comme des fonctions essentielles pour les dispositions circulaires, les motifs d’ondes et les animations fluides.

Comprendre les fonctions CSS cos() et sin() à travers le cercle unitaire

Les fonctions CSS cos() et sin() associent des angles à des coordonnées en utilisant le concept du cercle unitaire. Imaginez le cercle unitaire comme un cercle de rayon 1, centré à l’origine d’un système de coordonnées.

• cos() renvoie la coordonnée X pour un angle donné
• sin() renvoie la coordonnée Y pour un angle donné

Lorsque vous passez un angle à ces fonctions mathématiques CSS, elles renvoient des valeurs comprises entre -1 et 1, représentant des positions sur le cercle unitaire. Cette relation mathématique devient le fondement de la création de mises en page CSS dynamiques.

/* Syntaxe de base */
.element {
  --angle: 45deg;
  --x: cos(var(--angle)); /* Renvoie ~0.707 */
  --y: sin(var(--angle)); /* Renvoie ~0.707 */
}

Créer des dispositions circulaires avec les fonctions trigonométriques CSS

L’une des applications les plus pratiques des fonctions CSS cos() et sin() est le positionnement d’éléments autour d’un cercle. Cette technique élimine le besoin de positions codées en dur ou de calculs 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)));
}

Cette approche distribue automatiquement les éléments uniformément autour d’un cercle, ce qui la rend parfaite pour les menus radiaux, les cadrans d’horloge ou les dispositions décoratives. Le concept de cercle unitaire CSS s’adapte naturellement à n’importe quelle valeur de rayon que vous choisissez.

Construire des motifs d’ondes et des animations CSS oscillatoires

Les fonctions trigonométriques CSS excellent dans la création de motifs d’ondes organiques. Puisque sin() et cos() produisent des oscillations fluides, elles sont idéales pour les animations CSS en forme d’ondes sans images clés complexes.

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

Pour des ondes animées, combinez ces fonctions avec des propriétés personnalisées CSS et des animations :

@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; }
}

Performances et prise en charge par les navigateurs

Les fonctions mathématiques CSS, y compris cos() et sin(), bénéficient désormais d’une prise en charge généralisée dans tous les navigateurs majeurs. Ces fonctions sont nativement optimisées au sein du pipeline de rendu du navigateur, offrant de meilleures performances que les calculs basés sur JavaScript pour les mises en page et animations CSS.

Avantages clés :

• Aucune surcharge JavaScript à l’exécution
• Les calculs s’effectuent pendant la phase de calcul des styles
• Recalcul automatique lors des changements de viewport ou de propriétés
• Animations fluides à 60 fps lorsqu’elles sont combinées avec les transformations CSS

Conseils pratiques de mise en œuvre

Lorsque vous travaillez avec des fonctions trigonométriques CSS, gardez à l’esprit ces bonnes pratiques :

1. Utilisez les propriétés personnalisées CSS pour des valeurs réutilisables et une maintenance facilitée
2. Combinez avec calc() pour mettre à l’échelle les résultats de la plage -1 à 1 du cercle unitaire
3. Exploitez les propriétés transform pour des animations accélérées par le matériel
4. Considérez les unités responsives comme vw ou cqi pour des mises en page évolutives

/* Disposition circulaire responsive */
.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));
}

Conclusion

Les fonctions CSS cos() et sin() apportent une précision mathématique aux mises en page web sans dépendances JavaScript. Des menus de navigation circulaires aux animations d’ondes fluides, ces fonctions mathématiques CSS offrent des performances natives du navigateur et un code plus propre et plus maintenable. Alors que la prise en charge par les navigateurs continue de se consolider, les fonctions trigonométriques CSS deviennent des outils essentiels pour les mises en page et animations CSS modernes.

FAQ

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..