คํานวณไซน์ โคไซน์ แทนเจนต์ และอื่นๆ ใน CSS
ฟังก์ชันตรีโกณมิติ
ใน CSS คุณสามารถเขียนนิพจน์ทางคณิตศาสตร์ได้ ฟังก์ชัน calc()
อยู่ที่ฐานเพื่อใช้คํานวณ แต่คุณอาจเคยได้ยินเกี่ยวกับ min()
, max()
และ clamp()
ด้วย
ฟังก์ชันที่รวมกับฟังก์ชันเหล่านี้คือฟังก์ชันตรีโกณมิติ sin()
, cos()
, tan()
, asin()
, acos()
, atan()
และ atan2()
ฟังก์ชันเหล่านี้กำหนดไว้ในข้อบังคับระดับ 4 ของโมดูลค่าและหน่วย CSS และพร้อมใช้งานในเบราว์เซอร์ทุกรุ่น
sin()
, cos()
และ tan()
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()