คำนวณไซน์ โคไซน์ แทนเจนต์ และอื่นๆ ใน CSS
ฟังก์ชันตรีโกณมิติ
คุณสามารถเขียนนิพจน์ทางคณิตศาสตร์ใน 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()