CSS'deki trigonometrik işlevler

CSS'de sinüs, kosinüs, tanjant ve daha fazlasını hesaplayabilirsiniz.

Bramus

Trigonometrik fonksiyonlar

CSS'de matematiksel ifadeler yazılabilir. Altta, hesaplamalar yapmak için calc() işlevi bulunur, ancak muhtemelen min(), max() ve clamp() anahtar kelimelerini de duymuşsunuzdur.

Bu işlevlere sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik işlevleri de katılır. Bu işlevler CSS Değerleri ve Birimleri Modülü 4. Seviyesinde tanımlanır ve tüm tarayıcılarda kullanılabilir.

sin(), cos() ve tan()

Temel üç trigonometrik işlev şunlardır:

• cos(): Açının kosinüsünü döndürür. Bu değer, -1 ile 1 arasında bir değerdir.
• sin(): Bir açının sinüsünü döndürür. Bu değer -1 ile 1 arasındadır.
• tan(): Açının tanjantını döndürür. Bu değer −∞ ile +∞ arasındadır.

JavaScript'deki benzerlerinden farklı olarak bu işlevler bağımsız değişken olarak hem açıları hem de radyanları kabul eder.

Aşağıdaki demoda, --angle kümesini çevreleyen üçgeni oluşturan çizgileri çizmek için bu işlevler kullanılır:

• "Hipotenüs" (sarı çizgi), dairenin merkezinden noktanın konumuna kadar olan bir çizgidir. Uzunluğu, dairenin --radius değerine eşittir.
• "Bitişik" (kırmızı çizgi), dairenin merkezinden X ekseni boyunca çizilen bir çizgidir. Uzunluğu, --radius değerinin --angle kosinüsü ile çarpımına eşittir.
• "Karşı" (mavi çizgi), noktanın ortasından Y ekseni boyunca uzanan bir çizgidir. Uzunluğu, --radius ile --angle sinüsünün çarpımına eşittir.
• Noktayı X eksenine doğru yeşil çizgiyle birleştirmek için --angle işlevinin tan() işlevi kullanılır.

asin(), acos(), atan() ve atan2()

sin(), cos() ve tan() için yay veya ters karşılıkları sırasıyla asin(), acos() ve atan()'tir. Bu fonksiyonlar, hesaplamayı ters yönde yapar: Bağımsız değişken olarak sayısal bir değer alır ve buna karşılık gelen açıyı döndürür.

Son olarak, A ve B bağımsız değişkenlerini kabul eden atan2() işlevi vardır. Bu işlev, pozitif X ekseni ile (B,A) noktası arasındaki açıyı döndürür.

Örnekler

Bu işlevlerin çeşitli kullanım alanları vardır. Sonraki adım küçük bir seçim.

Öğeleri merkez noktasının etrafında dairesel bir yörüngede taşıma

Aşağıdaki demoda, noktalar merkezi bir nokta etrafında dönüyor. Her nokta kendi merkezi etrafında döndürülüp dışa doğru hareket ettirilmez. Bunun yerine, her nokta X ve Y eksenlerinde kaydırılır. X ve Y eksenlerindeki mesafeler, --angle'nin cos() ve sırasıyla sin() değerleri dikkate alınarak belirlenir.

:root {
  --radius: 20vmin;
}

.dot {
  --angle: 30deg;
  translate: /* Translation on X-axis */
             calc(cos(var(--angle)) * var(--radius))

             /* Translation on Y-axis */
             calc(sin(var(--angle)) * var(--radius) * -1)
  ;
}

Noktaların merkez noktanın etrafında eşit olarak dağıtılması için her noktaya nth-child dizine göre ek bir ofset verilir. Örneğin, üç nokta varsa her bir nokta arasında 120deg (= 360deg / 3) bir mesafe vardır.

• Üç öğeden ilk alt öğe 0 x 120deg = 0deg ile ofset oluşturur.
• Üç alt öğeden ikincisi, 1 x 120deg = 120deg ile kaydırılır.
• Üç alt öğeden üçüncüsü, 2 x 120deg = 240deg ile kaydırılır.

Bir öğeyi orijinine bakacak şekilde döndürme

atan2() işlevi, bir noktadan diğerine göreceli açıyı hesaplar. İşlev, parametre olarak virgülle ayrılmış iki değeri kabul eder: 0,0 başlangıç noktasına göre diğer noktanın y ve x konumu.

Hesaplanan değerle, Bağımsız Dönüşüm Özellikleri'ni kullanarak öğeleri birbirine bakacak şekilde döndürebilirsiniz.

Aşağıdaki örnekte kutular, farenin konumuna bakacak şekilde döndürülmektedir. Fare konumu, JavaScript aracılığıyla özel bir mülkle senkronize edilir.

div.box {
  --my-x: 200;
  --my-y: 300;

  /* Position the box inside its parent */
  position: absolute;
  width: 50px;
  aspect-ratio: 1;
  translate: calc((var(--my-x) * 1px)) calc(var(--my-y) * 1px);

  /* Rotate so that the box faces the mouse position */
  /* For this, take the box its own position and size (25 = half the width) into account */
  rotate: atan2(
            calc((var(--mouse-x) - var(--my-x) - 25) * 1),
            calc((var(--mouse-y) - var(--my-y) - 25) * -1)
          );
}

Toplulukta öne çıkanlar

Ana Tudor'un hazırladığı bu Animated Möbius şeridinde gösterildiği gibi cos() ve sin(), çevirilerden daha fazlası için kullanılabilir. Burada, sonucu hsl() renk işlevinin s ve l bileşenlerini değiştirmek için kullanılır.