CSS'de sinüs, kosinüs, tanjant ve daha fazlasını hesaplayabilirsiniz.
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.
sin()
, cos()
ve tan()
cos()
ve tan()
Temel üç trigonometrik işlev şunlardır:
cos()
: Açının kosinüsünü döndürür. Bu değer-1
ile1
arasındadır.sin()
: Bir açının sinüsünü döndürür. Bu değer-1
ile1
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şlevinintan()
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.