ฟังก์ชันตรีโกณมิติใน CSS

คํานวณไซน์ โคไซน์ แทนเจนต์ และอื่นๆ ใน CSS

Bramus

ฟังก์ชันตรีโกณมิติ

ใน CSS คุณสามารถเขียนนิพจน์ทางคณิตศาสตร์ได้ ฟังก์ชัน calc() ทำหน้าที่เป็นฐานในการคํานวณ แต่คุณอาจเคยได้ยินเกี่ยวกับ min(), max() และ clamp() ด้วย

ฟังก์ชันที่รวมกับฟังก์ชันเหล่านี้คือฟังก์ชันตรีโกณมิติ sin(), cos(), tan(), asin(), acos(), atan() และ atan2() ฟังก์ชันเหล่านี้กำหนดไว้ในข้อบังคับระดับ 4 ของโมดูลค่าและหน่วย CSS และพร้อมใช้งานในเบราว์เซอร์ทุกรุ่น

sin(), cos() และ tan()

ฟังก์ชันตรีโกณหลัก 3 รายการ ได้แก่

• cos(): แสดงผลโคไซน์ของมุม ซึ่งเป็นค่าระหว่าง -1 ถึง 1
• sin(): แสดงผลค่าไซน์ของมุม ซึ่งอยู่ระหว่าง -1 ถึง 1
• tan(): แสดงผลแทนเจนต์ของมุม ซึ่งเป็นค่าระหว่าง −∞ ถึง +∞

ฟังก์ชันเหล่านี้ยอมรับทั้งมุมและเรเดียนเป็นอาร์กิวเมนต์ ซึ่งแตกต่างจากฟังก์ชันใน JavaScript

ในการสาธิตต่อไปนี้ ฟังก์ชันเหล่านี้จะใช้เพื่อวาดเส้นที่ประกอบกันเป็นรูปสามเหลี่ยมรอบชุด --angle:

• "ด้านตรงข้ามมุมฉาก" (เส้นสีเหลือง) คือเส้นจากจุดศูนย์กลางของวงกลมไปยังตำแหน่งของจุด ความยาวของเส้นนี้คือ --radius ของวงกลม
• "เส้นข้างเคียง" (เส้นสีแดง) คือเส้นจากศูนย์กลางของวงกลมไปตามแกน X ความยาวของเส้นนี้คือ --radius คูณด้วยโคไซน์ของ --angle
• "ตรงข้าม" (เส้นสีน้ำเงิน) คือเส้นจากจุดศูนย์กลางของจุดไปตามแกน Y ความยาวของเส้นนี้คือ --radius คูณด้วยไซน์ของ --angle
• ฟังก์ชัน tan() ของ --angle ใช้สำหรับวาดเส้นสีเขียวจากจุดไปยังแกน X

asin(), acos(), atan() และ atan2()

อาร์กหรือผกผันของ sin(), cos() และ tan() คือ asin(), acos() และ atan() ตามลำดับ ฟังก์ชันเหล่านี้จะคำนวณในทิศทางตรงกันข้าม โดยจะใช้ค่าตัวเลขเป็นอาร์กิวเมนต์และแสดงผลมุมที่เกี่ยวข้องของค่าดังกล่าว

สุดท้ายคือ atan2() ซึ่งยอมรับอาร์กิวเมนต์ 2 รายการ ได้แก่ A และ B ฟังก์ชันจะแสดงผลมุมระหว่างแกน X บวกกับจุด (B,A)

ตัวอย่าง

ฟังก์ชันเหล่านี้มีกรณีการใช้งานที่หลากหลาย ต่อไปนี้เป็นตัวอย่างบางส่วน

ย้ายรายการบนเส้นทางวงกลมรอบจุดศูนย์กลาง

ในการแสดงตัวอย่างต่อไปนี้ จุดจะหมุนรอบจุดศูนย์กลาง ระบบจะเลื่อนแต่ละจุดบนแกน X และ Y แทนการหมุนแต่ละจุดรอบจุดศูนย์กลางของจุดนั้นๆ แล้วเลื่อนออกไปด้านนอก ระยะทางบนแกน X และแกน Y จะกำหนดโดยพิจารณา cos() และ sin() ของ --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)
  ;
}

หากต้องการกระจายจุดให้เท่าๆ กันรอบๆ จุดศูนย์กลาง ระบบจะเพิ่มการออฟเซ็ตให้กับแต่ละจุดตามดัชนี nth-child ของจุดนั้น เช่น หากมีจุด 3 จุด ระยะห่างระหว่างจุดแต่ละจุดคือ 120deg (= 360deg / 3)

• องค์ประกอบย่อยรายการแรกจาก 3 รายการได้รับการหักลบเป็น 0 x 120deg = 0deg
• องค์ประกอบย่อยที่ 2 จาก 3 รายการจะเลื่อนด้วย 1 x 120deg = 120deg
• องค์ประกอบย่อยที่ 3 จาก 3 รายการจะเลื่อนด้วย 2 x 120deg = 240deg

หมุนองค์ประกอบให้หันหน้าไปยังจุดเริ่มต้น

ฟังก์ชัน atan2() จะคำนวณมุมสัมพัทธ์จากจุดหนึ่งไปยังอีกจุดหนึ่ง ฟังก์ชันนี้ยอมรับค่า 2 ค่าที่คั่นด้วยคอมมาเป็นพารามิเตอร์ ได้แก่ ตำแหน่ง y และ x ของจุดอื่นซึ่งสัมพันธ์กับจุดเริ่มต้นที่อยู่ที่จุดกำเนิด 0,0

เมื่อใช้ค่าที่คำนวณแล้ว คุณจะหมุนองค์ประกอบเพื่อให้หันหน้าเข้าหากันได้โดยใช้พร็อพเพอร์ตี้การเปลี่ยนรูปแบบแต่ละรายการ

ในตัวอย่างต่อไปนี้ ช่องต่างๆ จะมีการหมุนเพื่อให้หันหน้าไปทางตำแหน่งของเมาส์ ระบบจะซิงค์ตำแหน่งเมาส์กับพร็อพเพอร์ตี้ที่กำหนดเองผ่าน JavaScript

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)
          );
}

ไฮไลต์ของชุมชน

ดังที่แสดงในแถบ Möbius แบบเคลื่อนไหวโดย Ana Tudor นี้ cos() และ sin() สามารถใช้ทำอะไรได้มากกว่าแค่การแปล ในที่นี้จะใช้ผลลัพธ์เพื่อจัดการกับคอมโพเนนต์ s และ l ของฟังก์ชันสี hsl()