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

คำนวณไซน์ โคไซน์ แทนเจนต์ และอื่นๆ ใน 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()