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

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

Bramus

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

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

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

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

ฟังก์ชัน Trig หลัก 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()