CSS'deki trigonometrik işlevler

CSS'de sinüs, kosinüs, tanjant ve diğer değerleri hesaplayın.

Bramus

Trigonometrik fonksiyonlar

CSS'de matematiksel ifadeler yazılabilir. Altta, hesaplamalar yapmak için calc() işlevi bulunur, ancak büyük olasılıkla min(), max() ve clamp() adlarını da duymuşsunuzdur.

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

Tarayıcı Desteği

  • 111
  • 111
  • 108
  • 15,4

Kaynak

sin(), cos() ve tan()

Temel üç temel 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(): Açının sinüsünü döndürür. Bu değer, -1 ile 1 arasında bir değerdir.
  • tan(): Bir açının tanjantını döndürür (−∞ ile +∞ arasında bir değer).

JavaScript karşılıklarından farklı olarak, bu işlevler hem açıları hem de radyanları bağımsız değişken olarak kabul eder.

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

  • "Hipotenüs" (sarı çizgi), dairenin merkezinden noktanın konumuna kadar uzanan bir çizgidir. Uzunluğu, dairenin --radius uzunluğuna eşittir.
  • "Yakındaki" (kırmızı çizgi), X ekseni boyunca dairenin merkezinden gelen bir çizgidir. Uzunluğu, --radius değerinin --angle kosinüsü ile çarpımına eşittir.
  • "Karşıtı" (mavi çizgi), Y ekseni boyunca noktanın merkezinden gelen bir çizgidir. Uzunluğu, --radius değerinin --angle sinüsü ile çarpımına eşittir.
  • --angle işlevinin 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()'nin yay veya ters eşdeğerleri, sırasıyla asin(), acos() ve atan()'dır. 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 da A ve B olmak üzere iki bağımsız değişkeni kabul eden atan2() var. Fonksiyon, 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 merkezi bir nokta etrafında dairesel bir yol üzerinde taşıma

Aşağıdaki demoda noktalar merkezi bir noktanın çevresindedir. Her bir noktayı kendi merkezinin etrafında döndürüp ardından dışa taşımak yerine, her nokta X ve Y eksenlerine çevrilir. X ve Y eksenlerindeki mesafeler, sırasıyla cos() ve --angle için sin() 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ı merkezi noktanın çevresinde eşit bir şekilde dağıtmak için her noktaya, nth-child dizinine 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.
  • Üç öğeden ikincisinin ofseti 1 x 120deg = 120deg olur.
  • Üç öğeden üçüncüsünün ofseti 2 x 120deg = 240deg olur.

Bir öğeyi orijinaline 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 öğeleri, Bağımsız Dönüşüm Özellikleri kullanılarak birbirine bakacak şekilde döndürmek mümkündür.

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 sonuçları, hsl() renk işlevinin s ve l bileşenlerini değiştirmek için kullanılır.