CSS'deki trigonometrik işlevler

CSS'de sinüs, kosinüs, tanjant ve diğer değerleri hesaplama.

Bramus

Trigonometrik fonksiyonlar

CSS'de matematiksel ifadeler yazabilirsiniz. Temelde, hesaplamaları yapmak için calc() işlevi bulunur. Ancak, büyük olasılıkla min(), max() ve clamp() özelliklerini de duymuşsunuzdur.

Bu fonksiyonlar birleştirildi: sin(), cos(), tan(), asin(), acos(), atan() ve atan2() trigonometrik fonksiyonları. Bu işlevler CSS Değerleri ve Birimler Modülü Düzey 4'te tanımlanmıştır ve tüm tarayıcılarda kullanılabilir.

sin(), cos() ve tan()

Temel üç öncelik işlevi şunlardır:

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

JavaScript eşdeğerlerinin aksine, bu işlevler bağımsız değişkeni olarak hem açı hem de radyanları kabul eder.

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

• "Hipotenüs" (sarı çizgi), dairenin merkezinden noktanın konumuna kadar olan bir çizgidir. Uzunluğu dairenin --radius değerine eşit.
• "Bitiş" (kırmızı çizgi), dairenin merkezinden X ekseni boyunca uzanan bir çizgidir. Uzunluğu, --angle kosinüsü --radius ile çarpılır.
• "Karşıt" (mavi çizgi), Y ekseni boyunca noktanın merkezinden bir çizgidir. Uzunluğu, --angle sinüsünün --radius ile çarpımına eşittir.
• --angle öğesinin tan() işlevi, yeşil çizgiyi noktadan X eksenine doğru çizmek için kullanılır.

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

sin(), cos() ve tan() ifadelerinin ark veya ters karşılıkları sırasıyla asin(), acos() ve atan()'dir. Bu işlevler, 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 olmak üzere iki bağımsız değişkeni kabul eden atan2() vardır. İş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. Şimdi ise küçük bir seçim var.

Öğeleri merkezi bir nokta etrafında dairesel bir yolda taşıma

Aşağıdaki tanıtımda noktalar merkezi bir nokta etrafında dönüyor. Her bir noktayı kendi merkezi etrafında döndürüp sonra dışa doğru hareket ettirmek yerine, her bir nokta X ve Y eksenlerinde çevrilir. X ve Y eksenleri üzerindeki mesafeler, sırasıyla cos() ve sin() değerleri dikkate alınarak belirlenir.--angle

: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 noktası etrafında eşit bir şekilde dağıtılması için, her bir noktaya, nth-child endeksine göre ek bir ofset verilir. Örneğin, üç nokta varsa her nokta arasında 120deg (= 360deg / 3) mesafe bulunur.

• Üç öğeden ilki, 0 x 120deg = 0deg göreli olarak ayarlanır.
• Üç öğeden ikinci alt öğe 1 x 120deg = 120deg göreli olarak ayarlanır.
• Üç öğeden üçüncü alt öğe 2 x 120deg = 240deg göreli olarak ayarlanır.

Öğeyi kökenine bakacak şekilde döndürme

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

Hesaplanan değerle, Bağımsız Dönüşüm Özellikleri kullanılarak öğeler birbirine bakacak şekilde döndürülebilir.

Aşağıdaki örnekte kutular farenin konumuna bakacak şekilde döndürülmüştür. Fare konumu, JavaScript aracılığıyla bir özel 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 imzalı bu Möbius şeridinde gösterildiği gibi, cos() ve sin() sadece çevirilerden daha fazlası için kullanılabilir. Burada elde edilen sonuçlar hsl() renk işlevinin s ve l bileşenlerini değiştirmek için kullanılır.