ในบทความนี้เราจะทำความเข้าใจกับ Transform In โดยละเอียดและติดตามด้วยการสาธิตเชิงปฏิบัติโดยละเอียด คำแนะนำต่อไปนี้จะกล่าวถึงในบทความนี้
ด้วยความก้าวหน้าในฟังก์ชันการทำงานของเว็บไซต์การจัดเตรียมการผสานรวมที่ชาญฉลาดบนเว็บไซต์ของคุณจึงมีความสำคัญเท่าเทียมกันเพื่อให้น่าสนใจและดีขึ้น การเพิ่มองค์ประกอบ CSS ต่างๆที่ช่วยเสริมเว็บไซต์ของคุณเป็นสิ่งที่จำเป็นในแต่ละชั่วโมง
ผู้คนหลีกเลี่ยงเว็บไซต์ที่ไม่ดึงดูดความสนใจของคนจำนวนมาก ลองเปลี่ยนองค์ประกอบบางส่วนและตกแต่ง CSS ของคุณด้วยค่าการบีบอัดที่น้อยลง
เพื่อตอบสนองความต้องการที่คล้ายคลึงกันเราได้เปลี่ยนคุณสมบัติ CSS ที่เปลี่ยนองค์ประกอบโดยการเบ้หมุนปรับขนาดหรือแปล
ไปต่อกับบทความนี้เกี่ยวกับ Transform In CSS
Transform CSS คืออะไร?
การแปลงองค์ประกอบ CSS หมายถึงการจัดให้มีขอบในรูปแบบ 2D หรือ 3D มันเปลี่ยนรูปแบบขององค์ประกอบด้วยสายตา
การแปลง 2D ทำงานบนแกน X และ Y คุณสามารถระบุขอบหรือโครงสร้างใดก็ได้บนแกนทั้งสองเพื่อทำการเปลี่ยนแปลง ในขณะที่การแปลงแบบ 3 มิติจำเป็นต้องใช้แกน X, Y และ Z เพื่อให้ได้ความลึกที่จำเป็น
คุณสมบัติการแปลง CSS 2D:
ฟังก์ชัน | คำอธิบาย |
เมทริกซ์ ( n, n, n, n, n, n ) java ค้นหาจำนวนที่มากที่สุดในอาร์เรย์ | เมทริกซ์หกค่า |
แปลภาษา( x, y ) | อนุญาตให้องค์ประกอบเคลื่อนที่ไปตามแกน X และแกน Y |
แปล X ( n ) | อนุญาตให้องค์ประกอบเคลื่อนที่ไปตามแกน X |
แปล Y ( n ) | อนุญาตให้องค์ประกอบเคลื่อนที่ไปตามแกน Y |
มาตราส่วน ( x, y ) | เปลี่ยนความกว้างและความสูงขององค์ประกอบ |
ขนาด X ( n ) | เปลี่ยนความกว้างขององค์ประกอบ |
ขนาด Y ( n ) | เปลี่ยนความสูงขององค์ประกอบ |
หมุน( มุม ) | อนุญาตให้หมุนองค์ประกอบในมุมที่ระบุไว้ในพารามิเตอร์ |
ลาด( มุม x, มุม y ) | เอียงองค์ประกอบตามแกน X และแกน Y |
skewX ( มุม ) | เอียงองค์ประกอบไปตามแกน X |
เบ้ ( มุม ) | เอียงองค์ประกอบตามแนวแกน Y |
คุณสมบัติการแปลง CSS 3D:
ทรัพย์สิน | คำอธิบาย |
แปลง | ใช้การแปลง 2D หรือ 3D กับองค์ประกอบ |
แปลงกำเนิด | ให้คุณเปลี่ยนตำแหน่งขององค์ประกอบที่เปลี่ยนรูป |
เปลี่ยนสไตล์ | ระบุวิธีการแสดงผลองค์ประกอบที่ซ้อนกันในพื้นที่ 3 มิติ |
มุมมอง | ระบุมุมมองเกี่ยวกับการดูองค์ประกอบ 3 มิติ |
มุมมองที่มา | ระบุตำแหน่งด้านล่างขององค์ประกอบ 3 มิติ |
การมองเห็นด้านหลัง | กำหนดว่าควรมองเห็นองค์ประกอบหรือไม่เมื่อไม่หันหน้าจอ |
ตัวอย่างเช่น:
css .element {width: 20px height: 20px transform: scale (20)}
ตอนนี้เมื่อคุณทำเช่นนั้นองค์ประกอบที่กำหนดไว้จะถูกปรับขนาด 20 เท่า
ไม่เพียงแค่นี้คุณยังสามารถปรับขนาดแกนได้อย่างชาญฉลาดสำหรับการปรับขนาดแนวนอนและมาตราส่วนแนวตั้ง
แปลง: scaleX (2) แปลง: scaleY (.5)
เพื่อให้เกิดการเปลี่ยนแปลงที่เหมาะสมในทุกเบราว์เซอร์คุณสามารถ:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}
คุณสมบัติการแปลง CSS ช่วยเพิ่มพื้นที่พิกัดของระดับการจัดรูปแบบภาพ CSS
ระดับการจัดรูปแบบภาพคืออะไร?
ระดับการจัดรูปแบบภาพหมายถึงการประมวลผลเอกสารและนำเสนอด้วยสายตาบนแพลตฟอร์มสื่อ ด้วยการจัดรูปแบบภาพคุณสามารถแปลงแต่ละองค์ประกอบเป็นแบบจำลองที่สอดคล้องกับรูปแบบกล่อง CSS แบบจำลองกล่อง CSS กำหนดองค์ประกอบในรูปแบบกล่องสี่เหลี่ยมมาตรฐานกำหนดขนาดตำแหน่งและคุณสมบัติ
บันทึก: สามารถเปลี่ยนองค์ประกอบที่เปลี่ยนแปลงได้เท่านั้น
ไปต่อกับบทความนี้เกี่ยวกับ Transform In CSS
คุณสมบัติการแปลงต่างๆเป็นอย่างไร?
มาดูคุณสมบัติการเปลี่ยนแปลงทั้งหมด:
1. สเกล (): การปรับขนาดหมายถึงการเปลี่ยนขนาดขององค์ประกอบในแนวนอนหรือแนวตั้ง
สำหรับการปรับขนาดแนวตั้ง:ขนาด X
สำหรับการปรับขนาดแนวนอน:ขนาด
สำหรับองค์ประกอบคุณยังสามารถเปลี่ยนขนาดแบบอักษรช่องว่างภายในความสูงหรือความกว้างได้ ค่าดีฟอลต์คือ 1 ซึ่งหมายถึงการให้ 0.5 เนื่องจากค่าลดลงครึ่งหนึ่งในขณะที่ให้ 2 เพิ่มสเกลเป็นสองเท่า
2. เอียง (): คุณสมบัติ Skew ช่วยให้ผู้ใช้เอียงองค์ประกอบไปทางขวาหรือซ้ายจากจุดพิกัดหนึ่ง เกือบจะเหมือนกับการเปลี่ยนรูปสี่เหลี่ยมเป็นสี่เหลี่ยมด้านขนาน คุณสามารถเอียงองค์ประกอบตามพิกัด
ตัวอย่าง:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)
เมื่อคุณทำเช่นนั้นองค์ประกอบจะเอียง 25 องศาในแนวนอนและแนวตั้งโดยใช้ skewX หรือ skewY
3. หมุน ( ) : คุณสามารถหมุนองค์ประกอบตามเข็มนาฬิกาโดยใช้คุณสมบัตินี้ คุณสามารถหมุนได้ 180 องศาหรือ 360 องศาเพื่อนำกลับไปที่เดิม
.element {แปลง: หมุน (25deg)}
สำหรับการหมุนคุณสามารถใช้สามมิติใดก็ได้: หมุน X หมุน Y หรือหมุน Z
4. แปล ( ) : คุณสามารถย้ายองค์ประกอบได้อย่างถูกต้องโดยคว่ำหรือไปด้านข้าง
.element {แปลง: แปล (20px, 10px)}
Translate จะย้ายวัตถุ / องค์ประกอบที่ระบุไว้คว่ำหรือไปด้านข้าง ค่าที่ระบุครั้งแรกจะย้ายวัตถุไปทางขวาวอร์ด (ค่าลบจะย้ายไปทางซ้าย) และค่าที่สองจะเลื่อนลง (การระบุค่าลบจะเลื่อนขึ้น)
หากสิ่งนี้อาจทำให้คุณสับสนให้ใช้แกน X เพื่อเปลี่ยนตำแหน่งขององค์ประกอบในแนวนอนและแกน Y เพื่อเปลี่ยนตำแหน่งในแนวตั้ง แง่มุมที่น่าทึ่งที่สุดเกี่ยวกับคุณสมบัติการแปลงคือการใช้การแปลงจะอนุญาตให้องค์ประกอบเคลื่อนที่ได้เท่านั้นทำให้องค์ประกอบหรือข้อความอื่น ๆ ยังคงอยู่ โดยทั่วไประยะทางจะถ่ายเป็นพิกเซลหรือเปอร์เซ็นต์
ตัวอย่างเช่น:
.element {transform: translateX (value) transform: translateY (value)}
5. มุมมอง (): คุณสามารถให้ความลึกในมุมมองขององค์ประกอบ ช่วยให้สามารถแปลง 3D ให้กับองค์ประกอบได้โดยทำให้เป็นรูปลูกบาศก์ในการแปลง
แปล 3d (x, y, z)
แปล Z (z)
แปล 3d (x, y, z) แปล Z (z)
การนำแกน z มาใช้ทำให้องค์ประกอบเป็นภาพ 3 มิติ translateZ () ย้ายองค์ประกอบไปยังผู้แสดงในขณะที่ค่าลบจะเคลื่อนออกไป
6. เมทริกซ์ () : รวมการเปลี่ยนแปลงทั้งหมดให้เป็นหนึ่งเดียว
หมุน (45deg) แปล (24px, 25px)
การใช้เมทริกซ์ () รวมคุณสมบัติการแปลงทั้งหมดไว้ในอาร์เรย์เดียว
java วันที่ใหม่จากสตริง
การใช้คุณสมบัติการแปลงสามารถปรับปรุงองค์ประกอบของคุณได้อย่างมากดังนั้นเว็บไซต์ของคุณจึงน่าดึงดูด ลองดูสิ!
เรามาถึงตอนท้ายของบทความนี้เกี่ยวกับ Transform In CSS
หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโปรดดูที่ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)
หากคุณยังสนใจหากคุณมีคำถามใด ๆ คุณสามารถโพสต์ไว้ในส่วนความคิดเห็นของบล็อก 'CSS' นี้แล้วเราจะติดต่อกลับโดยเร็วที่สุด