การแปลง CSS 2D

การสร้างองค์ประกอบเว็บแบบเคลื่อนไหวเป็นคุณลักษณะที่สำคัญของการออกแบบเว็บ ตัวอย่างเช่น คุณอาจกำลังออกแบบปุ่มที่คุณต้องการเอียงเมื่อผู้ใช้วางเมาส์เหนือปุ่ม

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

กวดวิชานี้จะอภิปรายพร้อมตัวอย่างวิธีการทำงานกับการแปลง 2D ใน CSS โดยใช้คุณสมบัติการแปลง เมื่ออ่านบทช่วยสอนนี้จบ คุณจะเป็นผู้เชี่ยวชาญในการใช้การแปลง CSS 2D

การแปลง CSS 2D

ฟังก์ชันการแปลง CSS ช่วยให้คุณสร้างแอนิเมชั่นการแปลงพื้นฐาน เช่น การหมุน การเคลื่อนไหว มาตราส่วน และการเอียงบนหน้าเว็บ

เมื่อองค์ประกอบถูกแปลง จะไม่มีผลกับองค์ประกอบที่อยู่ใกล้เคียง อย่างไรก็ตาม องค์ประกอบที่แปลงแล้วสามารถซ้อนทับกันได้ แม้ว่าจะยังคงใช้พื้นที่ในตำแหน่งเริ่มต้นบนหน้าเว็บก็ตาม

การแปลง CSS มีสองประเภท:2D และ 3D คุณสมบัติ transform ถูกใช้เพื่อสร้างการแปลงของทั้งสองประเภท แต่สำหรับบทความนี้ เราจะเน้นที่การแปลง 2D

มีการแปลง 2D จำนวนมากที่สามารถนำไปใช้กับองค์ประกอบเว็บใน CSS เหล่านี้คือ:

แปล()
สเกล()
สเกลX()
สเกลY()
เอียง()
skewX()
เอียงY()
เมทริกซ์()
หมุน()

มาแยกย่อยการเปลี่ยนแปลงเหล่านี้ทีละรายการ โดยอ้างอิงจากตัวอย่าง

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

translate() การแปลง

วิธี translate() ใช้เพื่อย้ายองค์ประกอบจากตำแหน่งปัจจุบันไปยังตำแหน่งใหม่บนหน้าจอ

ฟังก์ชัน translate() ยอมรับสองพารามิเตอร์:จำนวนพิกเซลทางด้านขวาที่องค์ประกอบควรย้าย และจำนวนพิกเซลที่องค์ประกอบด้านล่างควรย้าย

ไวยากรณ์สำหรับวิธีนี้คือ:

translate(xAxis, yAxis);

สมมติว่าเรามีกล่องที่เราต้องการย้าย 25px ไปทางขวาและ 50px ลงจากตำแหน่งปัจจุบัน เราสามารถทำงานนี้ให้สำเร็จโดยใช้รหัสต่อไปนี้:

index.html

<body>
	<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>

styles.css

div {
	transform: translate(25px, 50px);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Result of code here]

มาทำลายรหัสของเรากัน ในโค้ด HTML ของเรา เราได้สร้างข้อความสองย่อหน้า ย่อหน้าแรกจะปรากฏที่ด้านบนของหน้า ย่อหน้าที่สองปรากฏใต้ย่อหน้าแรกและอยู่ภายในแท็ก

ในโค้ด CSS ของเรา เราได้กำหนดสไตล์ที่ใช้กับแท็ก

ของเรา สไตล์นี้กำหนดสีของ

เป็นสีน้ำเงินอ่อน และทำให้กล่อง

มีขอบสีดำทึบกว้าง 3px นอกจากนี้ เรายังใช้การแปลง translate() เพื่อย้ายกล่องของเราไปทางซ้าย 25px และลง 50px

นี่คือรหัสของเราที่ไม่มีการแปลง translate() ที่ระบุ:

index.html

<body>
	<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>

styles.css

div {
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Code result here]

อย่างที่คุณเห็นโดยไม่ต้องระบุ translate() วิธีการ กล่องของเรายังคงตำแหน่งปกติบนหน้าเว็บ

rotate() การเปลี่ยนแปลง

rotate() การแปลงทำให้คุณสามารถหมุนองค์ประกอบตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาได้ ขอบเขตที่รายการจะหมุนเวียนจะขึ้นอยู่กับค่าระดับที่กำหนด

ไวยากรณ์สำหรับ rotate() การแปลงเป็นดังนี้:

transform: rotate(Xdeg);

ในไวยากรณ์ข้างต้น X หมายถึงจำนวนองศาที่คุณต้องการให้องค์ประกอบหมุนได้ หากคุณต้องการหมุนองค์ประกอบในทิศทางตามเข็มนาฬิกา คุณควรระบุค่าบวกสำหรับ X; มิฉะนั้น หากคุณต้องการหมุนองค์ประกอบทวนเข็มนาฬิกา คุณควรระบุค่าลบสำหรับ X

สมมติว่าเรามีกล่องที่เราต้องการหมุน 45 องศา เราสามารถหมุนกล่องของเราโดยใช้รหัสต่อไปนี้:

index.html

<div><p>This is a box that has been rotated.</p></div>

styles.css

div {
	transform: rotate(45deg);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Code result here]

มาทำลายรหัสของเรากัน ในโค้ด HTML ของเรา เราได้สร้างกล่อง

ที่มีข้อความย่อหน้าหนึ่ง ในโค้ด CSS ของเรา เราได้นำพื้นหลังสีน้ำเงินอ่อนมาใช้กับกล่องของเราและขอบสีดำทึบกว้าง 3px นอกจากนี้เรายังหมุนกล่อง

ของเรา 45 องศาในทิศทางตามเข็มนาฬิกา

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

การแปลงมาตราส่วน()

scale() วิธีช่วยให้คุณเพิ่มหรือลดขนาดขององค์ประกอบ

ไวยากรณ์สำหรับวิธี scale() มีดังนี้:

transform: scale(x, y);

ฟังก์ชันมาตราส่วนจะปรับขนาดความกว้าง (x) และความสูง (y) ของรูปภาพตามสัดส่วนตามค่าที่คุณระบุ หากคุณไม่ได้ระบุค่าสำหรับมาตราส่วนความสูง ฟังก์ชัน scale() จะถือว่ามาตราส่วนความสูงควรเท่ากับมาตราส่วนความกว้าง

สมมติว่าเรามีกล่องที่เราต้องการขยายเป็น 1.5 เท่าของขนาดเดิม เราสามารถทำได้โดยใช้รหัสนี้:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scale(1.5, 1.5);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Code result here]

ในโค้ด HTML ของเรา เราได้สร้างกล่องที่มีประโยคข้อความ ในโค้ด CSS ของเรา เราได้ระบุว่าแท็ก

ทั้งหมดควรมีพื้นหลังสีน้ำเงินอ่อนและเส้นขอบสีดำทึบกว้าง 3px เรายังใช้วิธีสเกล () เพื่อขยายขนาดกล่องของเราขึ้น 1.5 เท่าของขนาดดั้งเดิม

นี่คือภาพเปรียบเทียบขนาดของสองกล่อง กล่องที่เล็กที่สุดไม่มีค่ามาตราส่วน () และกล่องที่ใหญ่ที่สุดมีมาตราส่วน () เท่ากับ 1.5:

กล่องที่ใหญ่ที่สุด ซึ่งรวมถึงข้อความ This is a box that has been scaled. ใหญ่เป็น 1.5 เท่าของกล่องเดิมของเรา

การแปลงสเกลX()

scaleX() การแปลงทำให้คุณสามารถเพิ่มหรือลดความกว้างขององค์ประกอบได้ ไวยากรณ์สำหรับการแปลง scaleX() คือ:

transform: scaleX(xValue);

พารามิเตอร์ xValue คือจำนวนที่คุณต้องการปรับขนาดความกว้างขององค์ประกอบ สมมติว่าคุณมีกล่องที่มีความกว้างที่คุณต้องการเพิ่มเป็น 1.6 เท่า คุณสามารถเพิ่มขนาดของกล่องนี้โดยใช้รหัสต่อไปนี้:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleX(1.5);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Code result here]

ในตัวอย่างนี้ ความกว้างของกล่องของเราเพิ่มขึ้น 1.5 เท่าของความกว้างเดิม

การแปลงสเกลY()

scaleY() การแปลงทำให้คุณสามารถเพิ่มหรือลดความสูงขององค์ประกอบได้ scaleY() ทำงานในลักษณะเดียวกับ scaleX() แต่แทนที่จะส่งผลต่อความกว้างขององค์ประกอบ scaleY() จะเปลี่ยนความสูงขององค์ประกอบ

สมมติว่าเราต้องการลดความสูงของกล่องให้เหลือครึ่งหนึ่งของความสูงปัจจุบัน เราสามารถทำได้โดยใช้รหัสนี้:

index.html

<div><p>This is a box that has been scaled.</p></div>

styles.css

div {
	transform: scaleY(0.5);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Code result here]

ในโค้ดของเรา เราได้ลดความสูงของกล่องของเรา (ซึ่งแสดงโดยแกน y) ด้วยปัจจัย 0.5 กล่าวอีกนัยหนึ่ง กล่องของเรามีความสูงครึ่งหนึ่งของกล่องเดิม

ความเบ้() การแปลง

skew() การแปลงจะทำให้องค์ประกอบเอียงไปตามแกน x และ y ตามมุมที่กำหนด

ไวยากรณ์สำหรับเมธอด skew() มีดังนี้:

transform: skew(xValue, yValue);

xValue หมายถึงองค์ประกอบที่ควรเบ้บนแกน x และ yValue หมายถึงองค์ประกอบที่ควรเบ้บนแกน y ค่าทั้งสองควรแสดงเป็นองศา

หากไม่ได้ระบุค่าสำหรับ yValue จะไม่มีการเอียงบนแกน y

สมมติว่าเราต้องการเอียงกล่อง 10 องศาบนแกน x และ 15 องศาบนแกน y ของมัน เราสามารถทำได้โดยใช้รหัสนี้:

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: skew(10deg, 15deg);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

ในตัวอย่างนี้ เราเอียงกล่องของเรา 10 องศาบนแกน x และ 15 องศาบนแกน y

skewX() และ skewY() การแปลง

เช่นเดียวกับ scale() เมธอด skew() มาพร้อมกับวิธีการย่อยสองวิธีที่ใช้ในการเอียงองค์ประกอบข้ามแกน x หรือ y ขององค์ประกอบ

หากต้องการเอียงองค์ประกอบข้ามแกน X เท่านั้น คุณสามารถใช้วิธี skewX() ไวยากรณ์สำหรับวิธีนี้มีดังนี้:

transform: skewX(xValue);

xValue คือจำนวนองศาบนแกน x ที่องค์ประกอบควรเบ้

หากต้องการเอียงองค์ประกอบข้ามแกน Y คุณสามารถใช้วิธี skewY() ไวยากรณ์สำหรับวิธี skewY() คือ:

transform: skewY(yValue);

ดังนั้น หากคุณต้องการเอียงองค์ประกอบ 10 องศาบนแกน Y คุณสามารถใช้รหัสนี้:

div {
	transform: skewY(10deg);
}

เมทริกซ์() การแปลง

matrix() การแปลงจะทำการแปลง 2D CSS ทั้งหมดบนองค์ประกอบ ดังนั้น สามารถใช้ matrix() เพื่อใช้การแปลง หมุน ปรับขนาด และเอียงได้

ฟังก์ชัน matrix() ยอมรับพารามิเตอร์ 6 ตัว ซึ่งช่วยให้คุณใช้การแปลงกับองค์ประกอบได้ ไวยากรณ์สำหรับวิธีนี้มีดังนี้:

แปลง:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

สมมติว่าเราต้องการสร้างกล่องที่ใช้การแปลงต่อไปนี้:

สเกลบนแกน X ที่ 1
เอียงบนแกน Y 10 องศา
เอียงบนแกน X 10 องศา
สเกลบนแกน Y ที่ 1.25
การเคลื่อนไหว (“แปล”) บนแกน X ขึ้น 25px
การเคลื่อนที่บนแกน Y 25px

เราสามารถระบุการเปลี่ยนแปลงเหล่านี้แต่ละรายการแยกกันได้ อย่างไรก็ตาม การทำเช่นนี้จะทำให้เราต้องเขียนการแปลงแยกกันจำนวนมาก แต่เราสามารถใช้เมธอด matrix() เพื่อเขียนการแปลงเหล่านี้โดยใช้โค้ดหนึ่งบรรทัด

นี่คือรหัสที่เราสามารถใช้เพื่อสร้างกล่องของเราด้วยการแปลงดังกล่าว:

index.html

<div><p>This is a box that has been skewed.</p></div>

styles.css

div {
	transform: matrix(1, 10, 10, 1.25, 25, 25);
	background-color: lightblue;
	border: 3px solid black;
}

รหัสของเราส่งคืน:

[Code result here]

ในโค้ดของเรา เราใช้การบิดเบือน มาตราส่วน และการแปลการเปลี่ยนแปลงในกล่องของเรา เราทำสำเร็จโดยใช้เมธอด matrix() และส่งผ่านค่าที่เราระบุไว้ก่อนหน้านี้

บทสรุป

คุณสมบัติ transform ใช้เพื่อนำการแปลงไปใช้กับองค์ประกอบใน CSS CSS นำเสนอการแปลง 2D จำนวนมาก รวมถึงการเอียง มาตราส่วน การหมุน และการแปล ซึ่งใช้ในการแปลงองค์ประกอบเว็บ

บทช่วยสอนนี้สำรวจโดยอ้างอิงถึงตัวอย่าง พื้นฐานของการแปลง 2D CSS ตอนนี้คุณพร้อมที่จะเริ่มสร้างการแปลง 2D ของคุณเองแล้วเหมือนนักพัฒนาเว็บมืออาชีพ