Bu sayfa, Cloud Translation API ile çevrilmiştir.

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. Temel olarak hesaplama yapmak için calc() işlevi kullanılır ancak büyük olasılıkla min(), max() ve clamp() işlevlerinden de haberdarsınızdır.

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.

Tarayıcı desteği

Kaynak

`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ındadır.
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 ortasından noktanın konumuna uzanan 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 ile --angle kosinüsünün ç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.
Noktadan X eksenine doğru yeşil çizgi çizmek 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 işlevler hesaplamayı ters yönde yapar: Bağımsız değişken olarak bir sayısal 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. Aşağıda, bu türden birkaç örnek verilmiştir.

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

Aşağıdaki demoda, noktalar merkezi bir noktanın etrafında dönüyor. Her nokta kendi merkezi etrafında döndürülüp dışa doğru hareket ettirilmek yerine 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 şekilde dağıtılması için her noktaya nth-child dizine göre ek bir ofset verilir. Örneğin, üç nokta varsa her nokta arasında 120deg (= 360deg / 3) mesafe vardır.

Üç alt öğeden ilki 0 x 120deg = 0deg ile kaydırılır.
Üç 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 olan göreceli açıyı hesaplar. İşlev, parametreleri olarak virgülle ayrılmış iki değer kabul eder: 0,0 orijininde bulunan kaynak noktaya 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ülür. 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 tarafından oluşturulan bu animasyonlu Möbius şeridi'nde gösterildiği gibi, cos() ve sin() yalnızca çevirilerde değil, başka alanlarda da kullanılabilir. Burada, sonucu hsl() renk işlevinin s ve l bileşenlerini değiştirmek için kullanılır.