ฟังก์ชัน

The CSS Podcast - 020: Functions

จนถึงตอนนี้ในหลักสูตรนี้ คุณได้รู้จักฟังก์ชัน CSS หลายรายการแล้ว ในโมดูลตารางกริด เราได้แนะนำ minmax() และ fit-content() ให้คุณแล้ว ซึ่งช่วยคุณปรับขนาดองค์ประกอบ ในโมดูลสี เราได้แนะนํา rgb() และ hsl() ที่ช่วยคุณกําหนดสี

เช่นเดียวกับภาษาโปรแกรมอื่นๆ CSS มีฟังก์ชันในตัวมากมายที่คุณสามารถเข้าถึงได้ทุกเมื่อที่ต้องการ

ฟังก์ชัน CSS ทุกรายการมีวัตถุประสงค์เฉพาะเจาะจง ในบทเรียนนี้ คุณจะได้รับภาพรวมระดับสูง ซึ่งจะช่วยให้เข้าใจได้ดีขึ้นมากว่าควรใช้ฟังก์ชันเหล่านี้ที่ไหนและอย่างไร

ฟังก์ชันคืออะไร

ฟังก์ชันคือโค้ดที่มีชื่อซึ่งทำงานอย่างอิสระและทำงานหนึ่งๆ ให้เสร็จสมบูรณ์ ฟังก์ชันจะมีชื่อเพื่อให้คุณเรียกใช้ภายในโค้ดและส่งข้อมูลไปยังฟังก์ชันได้ ซึ่งเรียกว่าการส่งอาร์กิวเมนต์

ฟังก์ชัน CSS จำนวนมากเป็นฟังก์ชันบริสุทธิ์ ซึ่งหมายความว่าหากคุณส่งอาร์กิวเมนต์เดียวกันไปยังฟังก์ชันเหล่านั้น ฟังก์ชันจะแสดงผลลัพธ์เดิมเสมอ ไม่ว่าจะเกิดอะไรขึ้นในโค้ดส่วนที่เหลือ ฟังก์ชันเหล่านี้มักจะคํานวณใหม่เมื่อค่าใน CSS เปลี่ยนแปลง คล้ายกับองค์ประกอบอื่นๆ ในภาษา เช่น ค่าตามลําดับชั้นที่คำนวณแล้ว เช่น currentColor

ใน CSS คุณจะใช้ได้เฉพาะฟังก์ชันที่มีให้เท่านั้น แทนที่จะเขียนเอง แต่ฟังก์ชันจะซ้อนกันภายในบริบทบางอย่างได้ ซึ่งทำให้มีความยืดหยุ่นมากขึ้น เราจะอธิบายเรื่องนี้อย่างละเอียดยิ่งขึ้นในภายหลังในโมดูลนี้

ตัวเลือกฟังก์ชัน

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

คุณได้เรียนรู้เกี่ยวกับตัวเลือกฟังก์ชันในโมดูลคลาสจำลอง ซึ่งแสดงรายละเอียดฟังก์ชันต่างๆ เช่น :is() และ :not() อาร์กิวเมนต์ที่ส่งไปยังฟังก์ชันเหล่านี้คือตัวเลือก CSS ซึ่งระบบจะประเมินในภายหลัง หากมีองค์ประกอบที่ตรงกัน ระบบจะใช้กฎ CSS ที่เหลือกับองค์ประกอบเหล่านั้น

พร็อพเพอร์ตี้ที่กำหนดเองและ var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

พร็อพเพอร์ตี้ที่กำหนดเองคือตัวแปรที่ช่วยให้คุณแยกค่าในโค้ด CSS ออกเป็นรายการ พร็อพเพอร์ตี้ที่กำหนดเองจะได้รับผลกระทบจากการเรียงลําดับชั้นด้วย ซึ่งหมายความว่าสามารถดัดแปลงหรือกําหนดใหม่ตามบริบทได้ พร็อพเพอร์ตี้ที่กำหนดเองต้องมีขีดกลาง 2 ขีด (--) นำหน้าและต้องคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

ฟังก์ชัน var() ใช้อาร์กิวเมนต์ที่ต้องระบุ 1 รายการ ได้แก่ พร็อพเพอร์ตี้ที่กำหนดเองที่คุณพยายามแสดงผลเป็นค่า

ในข้อมูลโค้ดด้านบน ฟังก์ชัน var() ส่ง --base-color เป็นอาร์กิวเมนต์ หากมีการกําหนด --base-color ไว้ var() จะแสดงผลค่า

.my-element {
    background: var(--base-color, hotpink);
}

นอกจากนี้ คุณยังส่งค่าประกาศสำรองไปยังฟังก์ชัน var() ได้ด้วย ซึ่งหมายความว่าหากไม่พบ --base-color ระบบจะใช้ประกาศที่ส่งมาแทน ซึ่งในกรณีของตัวอย่างนี้คือสี hotpink

ฟังก์ชันที่แสดงผลค่า

ฟังก์ชัน var() เป็นเพียงหนึ่งในฟังก์ชัน CSS ที่แสดงผลค่า ฟังก์ชันอย่าง attr() และ url() เป็นไปตามโครงสร้างที่คล้ายกับ var() โดยคุณส่งอาร์กิวเมนต์อย่างน้อย 1 รายการและใช้อาร์กิวเมนต์ดังกล่าวในด้านขวาของการประกาศ CSS

a::after {
  content: attr(href);
}

ฟังก์ชัน attr() ในส่วนนี้จะนำเนื้อหาของแอตทริบิวต์ href ขององค์ประกอบ <a> มาตั้งค่าเป็น content ขององค์ประกอบจำลอง ::after หากค่าของแอตทริบิวต์ href ขององค์ประกอบ <a> มีการเปลี่ยนแปลง ระบบจะแสดงค่านี้ในแอตทริบิวต์ content โดยอัตโนมัติ

.my-element {
    background-image: url('/path/to/image.jpg');
}

ฟังก์ชัน url() ใช้ URL สตริงเพื่อโหลดรูปภาพ ฟอนต์ และเนื้อหา หากไม่ได้ส่ง URL ที่ถูกต้องหรือไม่พบทรัพยากรที่ URL ชี้ไป ฟังก์ชัน url() จะไม่แสดงผลใดๆ

ฟังก์ชันสี

คุณได้เรียนรู้เกี่ยวกับฟังก์ชันสีทั้งหมดในโมดูล color เราขอแนะนําอย่างยิ่งให้คุณอ่านบทความดังกล่าวหากยังไม่ได้อ่าน

ฟังก์ชันสีที่ใช้ได้ใน CSS มีดังนี้ rgb(), hsl(), lab(), lch(), oklab(), oklch() และ color() ทั้งหมดนี้มีรูปแบบคล้ายกันตรงที่ระบบจะส่งอาร์กิวเมนต์การกําหนดค่าและแสดงผลสี

นิพจน์ทางคณิตศาสตร์

CSS มีฟังก์ชันทางคณิตศาสตร์ที่มีประโยชน์เพื่อช่วยในการคำนวณประเภทต่างๆ เช่นเดียวกับภาษาโปรแกรมอื่นๆ อีกมากมาย

ฟังก์ชันคณิตศาสตร์

calc()

ฟังก์ชัน calc() ใช้นิพจน์ทางคณิตศาสตร์รายการเดียวเป็นพารามิเตอร์ นิพจน์ทางคณิตศาสตร์นี้อาจผสมผสานประเภทต่างๆ เช่น ความยาว ตัวเลข มุม และความถี่ นอกจากนี้ คุณยังผสมหน่วยเข้าด้วยกันได้ด้วย

.my-element {
    width: calc(100% - 2rem);
}

ในตัวอย่างนี้ มีการใช้ฟังก์ชัน calc() เพื่อปรับขนาดความกว้างขององค์ประกอบเป็น 100% ขององค์ประกอบหลักที่บรรจุไว้ จากนั้นนำ 2rem ออกจากค่าที่คำนวณแล้ว

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

ฟังก์ชัน calc() สามารถฝังอยู่ภายในฟังก์ชัน calc() อื่นได้ นอกจากนี้ คุณยังส่งผ่านพร็อพเพอร์ตี้ที่กำหนดเองในฟังก์ชัน var() เป็นส่วนหนึ่งของนิพจน์ได้ด้วย

min() และ max()

ฟังก์ชัน min() จะแสดงผลค่าที่คำนวณแล้วต่ำสุดของอาร์กิวเมนต์ที่ส่งอย่างน้อย 1 รายการ ฟังก์ชัน max() จะทํางานในทางตรงกันข้าม คือรับค่าที่ใหญ่ที่สุดจากอาร์กิวเมนต์ที่ส่งอย่างน้อย 1 รายการ

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

ในตัวอย่างนี้ ความกว้างควรเป็นค่าที่น้อยที่สุดระหว่าง 20vw ซึ่งเป็น 20% ของความกว้างของวิวพอร์ต และ 30rem ความสูงควรเป็นค่าที่ใหญ่ที่สุดระหว่าง 20vh ซึ่งเท่ากับ 20% ของความสูงของวิวพอร์ต กับ 20rem

clamp()

ฟังก์ชัน clamp() ใช้อาร์กิวเมนต์ 3 รายการ ได้แก่ ขนาดต่ำสุด ขนาดที่เหมาะสม และขนาดสูงสุด

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

ในตัวอย่างนี้ font-size จะปรับขนาดตามความกว้างของวิวพอร์ต ระบบจะเพิ่มหน่วย vw ลงในหน่วย rem เพื่อช่วยในการซูมหน้าจอ เนื่องจากหน่วย vw จะมีขนาดเท่ากันไม่ว่าจะซูมระดับใดก็ตาม การคูณด้วยหน่วย rem ซึ่งอิงตามขนาดแบบอักษรรูทจะทําให้ฟังก์ชัน clamp() มีจุดคํานวณแบบสัมพัทธ์

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชัน min(), max() และ clamp() ได้ในบทความเกี่ยวกับฟังก์ชันเหล่านี้

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

ฟังก์ชันตรีโกณมิติช่วยให้คุณค้นหาจุดใดก็ได้บนวงกลมตามมุม จำลองปรากฏการณ์ที่เกิดซ้ำ เช่น คลื่นเสียง อธิบายวงโคจร และอื่นๆ ใน CSS คุณสามารถใช้ฟังก์ชันตรีโกณมิติเพื่อตั้งค่าพร็อพเพอร์ตี้ตามการหมุน ภาพเคลื่อนไหวตามเวลา การหมุนองค์ประกอบตามจุด และการใช้งานอื่นๆ

ดูข้อมูลเพิ่มเติมและตัวอย่างได้ที่บทความเกี่ยวกับฟังก์ชันตรีโกณมิติ

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

ฟังก์ชัน sin(), cos() และ tan() จะรับอาร์กิวเมนต์มุมและแสดงผลไซน์ โคไซน์ และแทนเจนต์ตามลำดับ ฟังก์ชัน sin() และ cos() จะแสดงผลตัวเลขระหว่าง -1 ถึง 1 ฟังก์ชัน tan() จะแสดงผลตัวเลขระหว่าง -Infinity ถึง +Infinity อาร์กิวเมนต์มุมอาจเป็นหน่วยมุมที่รองรับก็ได้

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

ในตัวอย่างก่อนหน้านี้ --sine-degrees และ --sine-radians มีค่าเดียวกัน (ในกรณีนี้คือ 0.7071)

ในตัวอย่างก่อนหน้านี้ มีการใช้ฟังก์ชัน sin() และ cos() เพื่อสร้างภาพเคลื่อนไหวที่สั่นบนแกน x และ y โดยการคูณผลลัพธ์ด้วยรัศมีที่ระบุ การใช้ทั้ง 2 ฟังก์ชันพร้อมกันจะทำให้ภาพเคลื่อนไหวโคจรได้ เราใช้ พร็อพเพอร์ตี้ที่กำหนดเอง --angle เพื่อแสดงภาพเคลื่อนไหวของมุมสำหรับการเรียกใช้ฟังก์ชันทั้งหมดอย่างราบรื่น

asin(), acos() และ atan()

asin(), acos() และ atan() เป็นฟังก์ชันผกผันของ sin(), cos() และ tan() ซึ่งรับตัวเลขเป็นอาร์กิวเมนต์และแสดงผลค่ามุมระหว่าง -90deg ถึง 90deg ฟังก์ชัน asin() และ acos() ยอมรับตัวเลขระหว่าง -1 ถึง 1 ส่วนฟังก์ชัน atan() ยอมรับตัวเลขระหว่าง -Infinity ถึง +Infinity

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

ฟังก์ชัน atan2() ใช้อาร์กิวเมนต์ 2 รายการที่แสดงจุดซึ่งสัมพันธ์กับจุดเริ่มต้น และแสดงผลมุมที่แสดงทิศทางไปยังจุดนั้น คุณใช้ตัวเลือกนี้เพื่อหมุนองค์ประกอบให้หันไปยังจุดที่ต้องการได้ อาร์กิวเมนต์อาจเป็นตัวเลข หน่วยขนาด หรือเปอร์เซ็นต์ แต่อาร์กิวเมนต์ทั้ง 2 รายการต้องเป็นประเภทเดียวกัน

ในตัวอย่างนี้ ระบบใช้ฟังก์ชัน atan2() เพื่อกำหนดมุมระหว่างจุดศูนย์กลางของวิวพอร์ตกับตำแหน่งเมาส์ปัจจุบัน โปรดทราบว่าค่า y คืออาร์กิวเมนต์แรก และค่า x คืออาร์กิวเมนต์ที่ 2 จากนั้นระบบจะใช้มุมนี้เพื่อจัดตำแหน่ง "รูม่านตา" สัมพันธ์กับจุดศูนย์กลางของ "ดวงตา" เพื่อให้ดวงตาติดตามเมาส์

hypot()

ฟังก์ชัน hypot() ใช้อาร์กิวเมนต์ความยาว 2 รายการซึ่งแสดงถึงด้านของสามเหลี่ยมมุมฉากและแสดงผลความยาวของเส้นทแยงมุม คุณสามารถใช้รูปแบบคำสั่งนี้เป็นทางลัดในการคํานวณโดยใช้ฟังก์ชันเอ็กซ์โปเนนเชียล อาร์กิวเมนต์ทั้ง 2 รายการต้องเป็นประเภทหน่วยเดียวกัน และ hypot() จะแสดงผลเป็นประเภทเดียวกัน

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

ฟังก์ชันเอกซ์โพเนนเชียล

pow() และ exp()

ฟังก์ชัน pow() จะรับอาร์กิวเมนต์ตัวเลข 2 รายการ ได้แก่ ฐานและเลขชี้กำลัง แล้วยกฐานเป็นเลขยกกำลังของเลขชี้กำลัง อาร์กิวเมนต์ทั้ง 2 รายการต้องเป็นตัวเลขโดยไม่มีหน่วย ฟังก์ชัน exp() ใช้อาร์กิวเมนต์เดียวและเทียบเท่ากับการเรียกใช้ฟังก์ชัน pow() ที่มีฐานเป็น e

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

ฟังก์ชัน sqrt() จะรับอาร์กิวเมนต์ที่เป็นตัวเลขและแสดงผลรากที่สอง โดยอาร์กิวเมนต์ต้องไม่มีหน่วย

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

ฟังก์ชัน log() จะแสดงผลลอการิทึมของค่าตัวเลข หากมีการส่งอาร์กิวเมนต์ 1 รายการ ระบบจะแสดงผลลอการิทึมธรรมชาติ หากมีการส่งอาร์กิวเมนต์ที่ 2 ฟังก์ชัน log() จะใช้อาร์กิวเมนต์ที่ 2 เป็นฐานของลอการิทึม

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

ฟังก์ชันที่เกี่ยวข้องกับเครื่องหมาย

abs()

ฟังก์ชัน abs() จะรับอาร์กิวเมนต์ที่เป็นตัวเลขและแสดงผลค่าสัมบูรณ์ (บวก) ของค่าอาร์กิวเมนต์

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

ในตัวอย่างก่อนหน้านี้ ค่า alpha ของ -1 จะส่งผลให้ข้อความโปร่งใส แต่ฟังก์ชัน abs() จะแสดงผลค่าสัมบูรณ์ของ 1 ซึ่งส่งผลให้ข้อความทึบแสงโดยสมบูรณ์

sign()

ฟังก์ชัน sign() จะรับอาร์กิวเมนต์ที่เป็นตัวเลขและแสดงผลเครื่องหมายของอาร์กิวเมนต์ ค่าบวกจะแสดงผลเป็น 1 และค่าลบจะแสดงผลเป็น -1 ระบบจะแสดงผลค่าเป็น 0 0

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

ในตัวอย่างก่อนหน้านี้ หาก --value เป็นค่าบวก ค่าสูงสุดจะเป็น 75vh หากเป็นค่าลบ ค่าสูงสุดจะเป็น 25vh หากเป็น 0 ค่าสูงสุดจะเป็น 50vh

รูปร่าง

พร็อพเพอร์ตี้ CSS ของ clip-path, offset-path และ shape-outside ใช้รูปร่างเพื่อตัดกล่องให้อยู่ในรูปแบบภาพหรือกำหนดรูปร่างให้เนื้อหาไหลไปรอบๆ

มีฟังก์ชันรูปร่างที่ใช้กับพร็อพเพอร์ตี้ทั้ง 2 รายการนี้ได้ รูปร่างง่ายๆ เช่น circle(), ellipse() และ inset() ใช้อาร์กิวเมนต์การกําหนดค่าเพื่อปรับขนาด รูปร่างที่ซับซ้อนมากขึ้น เช่น polygon() ใช้คู่ค่าแกน X และ Y ที่คั่นด้วยคอมมาเพื่อสร้างรูปร่างที่กำหนดเอง

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

เช่นเดียวกับ polygon() ยังมีฟังก์ชัน path() ที่รับกฎการเติม SVG เป็นอาร์กิวเมนต์ด้วย ซึ่งช่วยให้คุณวาดรูปทรงที่ซับซ้อนสูงในเครื่องมือกราฟิกได้ เช่น Illustrator หรือ Inkscape จากนั้นจึงคัดลอกลงใน CSS

การแปลง

สุดท้ายในภาพรวมของฟังก์ชัน CSS คือฟังก์ชัน transform ซึ่งบิดเบี้ยว ปรับขนาด และแม้แต่เปลี่ยนความลึกขององค์ประกอบ ฟังก์ชันต่อไปนี้ทั้งหมดใช้กับพร็อพเพอร์ตี้ transform

การหมุน

คุณสามารถหมุนองค์ประกอบได้โดยใช้ฟังก์ชัน rotate() ซึ่งจะหมุนองค์ประกอบตามแกนกลาง นอกจากนี้ คุณยังใช้ฟังก์ชัน rotateX(), rotateY() และ rotateZ() เพื่อหมุนองค์ประกอบตามแกนที่ต้องการแทนได้ด้วย คุณสามารถส่งหน่วยองศา การหมุน และเรเดียนเพื่อกำหนดระดับการหมุนได้

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

ฟังก์ชัน rotate3d() ใช้อาร์กิวเมนต์ 4 รายการ

โดยอาร์กิวเมนต์ 3 รายการแรกจะเป็นตัวเลข ซึ่งกำหนดพิกัด X, Y และ Z อาร์กิวเมนต์ที่ 4 คือการหมุน ซึ่งจะรับองศา มุม และการเลี้ยวได้เช่นเดียวกับฟังก์ชันการหมุนอื่นๆ

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

คุณสามารถใช้พร็อพเพอร์ตี้ rotate แต่ละรายการเพื่อหมุนองค์ประกอบได้ เมื่อใช้นอกพร็อพเพอร์ตี้ transform คุณจะเปลี่ยนรูปแบบแยกต่างหากจากการเปลี่ยนรูปแบบอื่นๆ ได้ โดยรับค่าที่คล้ายกับฟังก์ชัน rotate

ปรับขนาด

คุณเปลี่ยนการปรับขนาดขององค์ประกอบได้ด้วย transform และฟังก์ชัน scale() ฟังก์ชันนี้ยอมรับตัวเลข 1 หรือ 2 รายการเป็นค่าซึ่งกำหนดการปรับขนาดเชิงบวกหรือเชิงลบ หากคุณกําหนดอาร์กิวเมนต์ตัวเลขเพียงรายการเดียว ระบบจะปรับขนาดทั้งแกน X และ Y เท่ากัน และการกําหนดทั้ง 2 รายการเป็นการเขียนย่อสําหรับ X และ Y เช่นเดียวกับ rotate() ก็มีฟังก์ชัน scaleX(), scaleY() และ scaleZ() เพื่อปรับขนาดองค์ประกอบบนแกนใดแกนหนึ่งแทน

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

เช่นเดียวกับฟังก์ชัน rotate ก็มีฟังก์ชัน scale3d() ด้วย ซึ่งคล้ายกับ scale() แต่ใช้อาร์กิวเมนต์ 3 รายการ ได้แก่ ปัจจัยการแปลงขนาด X, Y และ Z

คุณใช้พร็อพเพอร์ตี้ scale แต่ละรายการเพื่อปรับขนาดองค์ประกอบได้ เมื่อใช้นอกพร็อพเพอร์ตี้ transform คุณจะเปลี่ยนพร็อพเพอร์ตี้นี้แยกจากการเปลี่ยนรูปแบบอื่นๆ ได้

แปลภาษา

ฟังก์ชัน translate() จะย้ายองค์ประกอบโดยยังคงตำแหน่งเดิมในลำดับเอกสาร โดยรับค่าความยาวและเปอร์เซ็นต์เป็นอาร์กิวเมนต์ ฟังก์ชัน translate() จะเปลี่ยนตำแหน่งองค์ประกอบตามแกน X หากมีการกําหนดอาร์กิวเมนต์ 1 รายการ และเปลี่ยนตําแหน่งองค์ประกอบตามแกน X และ Y หากมีการกําหนดอาร์กิวเมนต์ทั้ง 2 รายการ

.my-element {
  transform: translatex(40px) translatey(25px);
}

คุณสามารถใช้ฟังก์ชันที่เฉพาะเจาะจงสำหรับแกนใดแกนหนึ่งได้เช่นเดียวกับฟังก์ชันการเปลี่ยนรูปแบบอื่นๆ โดยจะใช้ translateX, translateY และ translateZ นอกจากนี้ คุณยังใช้ translate3d ได้ด้วย ซึ่งจะช่วยให้คุณกำหนดการแปลค่า X, Y และ Z ในฟังก์ชันเดียวได้

คุณใช้พร็อพเพอร์ตี้ translate นอกพร็อพเพอร์ตี้ transform เพื่อย้ายองค์ประกอบได้เช่นเดียวกับ scale และ rotate

.my-element{
  translate: 20px 30px;
}

การบิดเบือน

คุณสามารถบิดเบือนองค์ประกอบได้โดยใช้ฟังก์ชัน skew() ที่รับมุมเป็นอาร์กิวเมนต์ ฟังก์ชัน skew() ทำงานในลักษณะที่คล้ายกับ translate() มาก หากคุณกําหนดอาร์กิวเมนต์เพียงรายการเดียว อาร์กิวเมนต์นั้นจะส่งผลต่อแกน X เท่านั้น และหากคุณกําหนดทั้ง 2 รายการ อาร์กิวเมนต์นั้นจะส่งผลต่อทั้งแกน X และ Y นอกจากนี้ คุณยังใช้ skewX และ skewY เพื่อส่งผลต่อแต่ละแกนแยกกันได้ด้วย

.my-element {
  transform: skew(10deg);
}

มุมมอง

สุดท้าย คุณสามารถใช้พร็อพเพอร์ตี้ perspective ซึ่งเป็นส่วนหนึ่งของครอบครัวพร็อพเพอร์ตี้การเปลี่ยนรูปแบบ เพื่อเปลี่ยนระยะห่างระหว่างผู้ใช้กับระนาบ Z วิธีนี้ช่วยให้รู้สึกถึงระยะทางและสามารถใช้เพื่อสร้างระยะชัดลึกในการออกแบบ

ตัวอย่างนี้จาก David Desandro จากบทความที่มีประโยชน์มากจะแสดงวิธีใช้พร็อพเพอร์ตี้นี้ พร้อมกับพร็อพเพอร์ตี้ perspective-origin-x และ perspective-origin-y เพื่อสร้างประสบการณ์ 3 มิติอย่างแท้จริง

ฟังก์ชันภาพเคลื่อนไหว ไล่ระดับสี และฟิลเตอร์

นอกจากนี้ CSS ยังมีฟังก์ชันที่ช่วยให้คุณสร้างภาพเคลื่อนไหวองค์ประกอบ ใช้การไล่สีกับองค์ประกอบ และฟิลเตอร์กราฟิกเพื่อปรับเปลี่ยนลักษณะขององค์ประกอบ เราได้อธิบายหัวข้อเหล่านี้ไว้ในโมดูลที่ลิงก์ไว้แล้ว เพื่อให้โมดูลนี้กระชับที่สุด ฟังก์ชันเหล่านี้ทั้งหมดมีโครงสร้างคล้ายกับฟังก์ชันที่แสดงในข้อบังคับนี้

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับฟังก์ชัน