ฟังก์ชัน CSS หมุน () ทำให้องค์ประกอบเอียงตามจำนวนองศาที่กำหนด คุณสามารถหมุนองค์ประกอบตามเข็มนาฬิกาโดยใช้จำนวนองศาบวก หรือจะหมุนองค์ประกอบทวนเข็มนาฬิกาโดยใช้จำนวนลบก็ได้
วันนี้เราจะมาเรียนรู้วิธีหมุนองค์ประกอบด้วย CSS ทำไมเราควรหมุนองค์ประกอบ? การหมุนองค์ประกอบทำให้หน้าเว็บของคุณมีการโต้ตอบมากขึ้น ใช้อย่างถูกต้อง องค์ประกอบที่หมุนได้จะเพิ่มความสวยงามให้กับไซต์ของคุณ
ขณะอ่านบทความนี้ โปรดอ้างอิงจาก repo ที่ส่งมาด้วย เพื่อให้คุณสามารถเห็นแนวคิดในการใช้งานจริง การรู้วิธีหมุนองค์ประกอบจะเป็นส่วนเสริมที่มีค่าในกล่องเครื่องมือ CSS ของคุณ
หมุน CSS()
ฟังก์ชัน CSS turns() ให้คุณหมุนองค์ประกอบบนแกน 2D ฟังก์ชันการหมุน () ยอมรับหนึ่งอาร์กิวเมนต์:มุมที่คุณต้องการหมุนองค์ประกอบเว็บของคุณ คุณสามารถหมุนองค์ประกอบตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาได้
มาดูไวยากรณ์ของฟังก์ชัน turns() กัน:
แปลง:หมุน (มุม);
ค่า "มุม" หมายถึงจำนวนองศาที่องค์ประกอบควรหมุน คุณสามารถระบุการหมุนตามเข็มนาฬิกาโดยใช้จำนวนองศาบวก (เช่น 45) หรือคุณสามารถหมุนไปในทิศทางตรงกันข้ามโดยใช้ค่าดีกรีเป็นลบ (เช่น -39)
ฟังก์ชันการหมุน () สามารถใช้กับองค์ประกอบ HTML ใดก็ได้ ตัวอย่างเช่น คุณสามารถหมุนย่อหน้าของข้อความ หรือจะหมุนภาพก็ได้
การหมุน HTML จะปรากฏขึ้นทันทีที่คุณแสดงหน้าเว็บ ดังนั้นจึงไม่สามารถมองเห็นการหมุนได้ หากต้องการดูการดำเนินการหมุนเวียน คุณควรใช้การเปลี่ยน CSS การเปลี่ยนผ่านจะเปลี่ยนสถานะขององค์ประกอบเมื่อมีการดำเนินการ เช่น เมื่อเคอร์เซอร์วางเมาส์เหนือองค์ประกอบ
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
rotate() ตัวอย่าง CSS
ไปข้างหน้าและสร้างหน้า HTML ของเราที่จะวางกล่องหมุน มาเพิ่มกล่องเป็น div และให้คลาสกันเถอะ (ตั้งชื่อว่า "หมุน")
คราวนี้มาใส่สไตล์กัน:
<ก่อนหน้า>div.rotate { ความกว้าง:50px; ความสูง:50px; พื้นหลัง-สี:ช็อคโกแลต;}รีเฟรช ใจเย็นๆ เรามีกล่องสี ด้วยกล่องสีนี้ เรามีทุกอย่างที่จำเป็นเพื่อเริ่มใช้ฟังก์ชันการหมุน ()
ในการที่จะหมุนกล่องของเรา เราต้องพูดถึงคุณสมบัติการแปลงก่อน
ฟังก์ชันการแปลง CSS ตามความหมายของชื่อ แปลงองค์ประกอบ หนึ่งในฟังก์ชันที่เราสามารถใช้ได้คือ rotate() . คุณสมบัติ transform สามารถใช้ฟังก์ชันอื่นๆ ได้มากมาย และมีหลายสิ่งที่เราสามารถทำได้ด้วยการแปลง การหมุนเป็นเพียงหนึ่งในนั้น
ฟังก์ชันการหมุนจะย้ายองค์ประกอบ ใช้อาร์กิวเมนต์หนึ่งข้อ:จำนวนองศาที่เราต้องการบิดเบือนองค์ประกอบ ไปข้างหน้าและใช้การหมุนเป็นบวก 35 องศา:
<ก่อนหน้า>div.rotate { ความกว้าง:50px; ความสูง:50px; พื้นหลังสี:ช็อคโกแลต; แปลง:หมุน (35deg); }เราหมุนกล่องของเรา! แตะตัวเองที่ด้านหลัง
เมื่อใดควรใช้ฟังก์ชัน CSS Transform turns()
การหมุนช่วยให้มีแนวคิด UI แฟนซีหรือหมุนรูปภาพได้ ตัวอย่างเช่น คุณสามารถหมุนภาพได้ 180 องศา หากคุณต้องการภาพที่หมุนได้ที่อื่นเพียงแค่บันทึกและใช้งานตามนั้น
อีกสิ่งหนึ่งที่คุณสามารถหมุนได้คือข้อความ สมมติว่าคุณกำลังสร้างเลย์เอาต์ที่เลียนแบบนิตยสาร คุณสามารถหมุนข้อความเพื่อเพิ่มการเน้นที่องค์ประกอบข้อความได้
และนั่นไม่ใช่ทั้งหมดที่คุณทำได้ด้วย rotate() . ฟังก์ชันการหมุนช่วยให้เราทำแอนิเมชั่น . ที่เจ๋งจริงๆ ได้ !
ไปข้างหน้าและใช้ CSS :hover selector บน div ของเราเพื่อใช้เอฟเฟกต์การหมุนที่ดี:
.rotate:hover { แปลง:หมุน (35deg); พื้นหลัง-สี:deeppink;} มันไม่เจ๋งเหรอ? 😎
กล่องของเราจะหมุนเมื่อเราวางเมาส์เหนือมัน เราใช้คุณสมบัติ CSS สีพื้นหลังเพื่อเปลี่ยนสีของกล่องเมื่อเราวางเมาส์เหนือมัน
บทสรุป
ฟังก์ชัน CSS turns() ทำให้องค์ประกอบเว็บปรากฏเป็นมุม ฟังก์ชันนี้ยอมรับหนึ่งอาร์กิวเมนต์:จำนวนองศาที่องค์ประกอบควรถูกหมุน คุณสามารถระบุค่าดีกรีบวกหรือลบได้
องค์ประกอบที่หมุนได้ช่วยให้คุณทำให้หน้าเว็บของคุณสวยงามยิ่งขึ้น ตัวอย่างเช่น คุณสามารถใช้การหมุนไปยังกล่องเมื่อผู้ใช้วางเคอร์เซอร์ไว้เหนือกล่องนั้น หรือคุณอาจตัดสินใจหมุนลิงก์เมื่อผู้ใช้วางเมาส์เหนือลิงก์นั้น ขึ้นอยู่กับว่าคุณจะใช้ทักษะนี้อย่างไร!
คุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ CSS หรือไม่? ดูคู่มือ CSS วิธีเรียนรู้ฉบับสมบูรณ์สำหรับคำแนะนำจากผู้เชี่ยวชาญและคำแนะนำเกี่ยวกับแหล่งข้อมูลการเรียนรู้ชั้นนำ
