วิธีการใช้ประโยชน์จากการแปลงใน CSS ให้ดีที่สุด



ในบทความนี้เราจะทำความเข้าใจว่า Transform In CSS คืออะไรโดยละเอียดและติดตามการสาธิตเชิงปฏิบัติโดยละเอียด

ในบทความนี้เราจะทำความเข้าใจกับ 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 เท่า

ตัวอย่าง - แปลง CSS- Edureka

ไม่เพียงแค่นี้คุณยังสามารถปรับขนาดแกนได้อย่างชาญฉลาดสำหรับการปรับขนาดแนวนอนและมาตราส่วนแนวตั้ง

แปลง: 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' นี้แล้วเราจะติดต่อกลับโดยเร็วที่สุด