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

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

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

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

การรองรับเบราว์เซอร์

  • Chrome: 111
  • Edge: 111
  • Firefox: 108
  • Safari: 15.4

แหล่งที่มา

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()