CSS3 แปลง
แปลง CSS3 ช่วยให้คุณสามารถแปลหมุนขนาดและองค์ประกอบเอียง
การเปลี่ยนแปลงที่เป็นผลกระทบที่ช่วยให้รูปร่างเปลี่ยนแปลงองค์ประกอบขนาดและตำแหน่ง
CSS3 สนับสนุน 2D และ 3D แปลง
เลื่อนเมาส์ไปที่องค์ประกอบด้านล่างเพื่อดูความแตกต่างระหว่าง 2 มิติและ 3 มิติการเปลี่ยนแปลง:
สนับสนุนเบราว์เซอร์สำหรับแปลง 2D
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -ms-, -webkit-, -moz- หรือ -o- specify รุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 แปลง 2D
ในบทนี้คุณจะได้เรียนรู้เกี่ยวกับวิธีการแปลง 2D ต่อไปนี้:
-
translate() -
rotate() -
scale() -
skewX() -
skewY() -
matrix()
 | เคล็ดลับ: คุณจะได้เรียนรู้เกี่ยวกับการแปลง 3 มิติในบทต่อไป |
|---|
translate() วิธี
translate() วิธีการย้ายองค์ประกอบจากตำแหน่งปัจจุบัน (ตามพารามิเตอร์ที่กำหนดสำหรับแกน X และแกน Y)
ตัวอย่างต่อไปนี้ย้าย <div> องค์ประกอบ 50 พิกเซลไปทางขวาและ 100 พิกเซลลดลงจากตำแหน่งปัจจุบัน:
ตัวอย่าง
div
{
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
ลองตัวเอง» rotate() วิธี
rotate() วิธีการหมุนองค์ประกอบตามเข็มนาฬิกาหรือทวนเข็มนาฬิกาตามระดับที่กำหนด
ตัวอย่างต่อไปนี้หมุน <div> องค์ประกอบตามเข็มนาฬิกา 20 องศา:
ตัวอย่าง
div
{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
ลองตัวเอง» โดยใช้ค่าลบจะหมุนองค์ประกอบทวนเข็มนาฬิกา
ตัวอย่างต่อไปนี้หมุน <div> องค์ประกอบทวนเข็มนาฬิกา 20 องศา:
ตัวอย่าง
div
{
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
ลองตัวเอง» scale() วิธี
scale() วิธีการเพิ่มหรือลดขนาดขององค์ประกอบ (ตามพารามิเตอร์ที่กำหนดสำหรับความกว้างและความสูง)
ตัวอย่างต่อไปนี้เพิ่ม <div> องค์ประกอบจะเป็นสองเท่าของความกว้างเดิมและสามเท่าของความสูงเดิม:
ตัวอย่าง
div
{
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3);
}
ลองตัวเอง» ตัวอย่างต่อไปนี้ลดลง <div> องค์ประกอบที่จะเป็นครึ่งหนึ่งของความกว้างเดิมและส่วนสูง:
ตัวอย่าง
div
{
-ms-transform: scale(0.5,0.5); /* IE 9 */
-webkit-transform: scale(0.5,0.5); /* Safari */
transform: scale(0.5,0.5);
}
ลองตัวเอง» skewX() วิธี
skewX() วิธี skews องค์ประกอบตามแนวแกน X โดยมุมที่ระบุ
ตัวอย่างต่อไปนี้ skews <div> องค์ประกอบ 20 องศาตามแนวแกน X:
ตัวอย่าง
div
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
ลองตัวเอง» skewY() วิธี
skewY() วิธี skews องค์ประกอบตามแนวแกน Y โดยมุมที่ระบุ
ตัวอย่างต่อไปนี้ skews <div> องค์ประกอบ 20 องศาตามแนวแกน Y:
ตัวอย่าง
div
{
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
ลองตัวเอง» skew() วิธี
skew() วิธี skews องค์ประกอบพร้อม X และแกน Y โดยมุมที่กำหนดด้วย
ตัวอย่างต่อไปนี้ skews <div> องค์ประกอบ 20 องศาตามแนวแกน X และ 10 องศาตามแนวแกน Y:
ตัวอย่าง
div
{
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
ลองตัวเอง» ถ้าพารามิเตอร์ที่สองไม่ได้ระบุ แต่ก็มีค่าเป็นศูนย์ ดังนั้นตัวอย่างต่อไปนี้ skews <div> องค์ประกอบ 20 องศาตามแนวแกน X:
ตัวอย่าง
div
{
-ms-transform: skew(20deg); /* IE 9 */
-webkit-transform: skew(20deg); /* Safari */
transform: skew(20deg);
}
ลองตัวเอง» matrix() วิธี
matrix() วิธีการรวมทุก 2D เปลี่ยนวิธีการเข้าเป็นหนึ่งเดียว
matrix() วิธีการใช้เวลาหกพารามิเตอร์ที่มีฟังก์ชั่นทางคณิตศาสตร์ซึ่งจะช่วยให้คุณสามารถหมุน, ขนาด, ย้าย (แปล) และเอียงองค์ประกอบ
พารามิเตอร์ดังนี้ matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) :
ตัวอย่าง
div
{
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»
CSS3 แปลงคุณสมบัติ
ตารางต่อไปนี้ทุก 2D เปลี่ยนคุณสมบัติ:
| คุณสมบัติ | ลักษณะ |
|---|---|
| transform | การใช้การแปลง 2D หรือ 3D เพื่อองค์ประกอบ |
| transform-origin | ช่วยให้คุณสามารถเปลี่ยนตำแหน่งในองค์ประกอบเปลี่ยน |
2D เปลี่ยนวิธีการ
| ฟังก์ชัน | ลักษณะ |
|---|---|
| matrix(n,n,n,n,n,n) | กำหนดเปลี่ยนแปลง 2D โดยใช้เมทริกซ์ของหกค่า |
| translate(x,y) | กำหนดแปล 2D ย้ายองค์ประกอบตามแนวแกน X และแกน Y |
| translateX(n) | กำหนดแปล 2D ย้ายองค์ประกอบตามแนวแกน X |
| translateY(n) | กำหนดแปล 2D ย้ายองค์ประกอบตามแนวแกน Y |
| scale(x,y) | กำหนดเปลี่ยนแปลงขนาด 2D, การเปลี่ยนแปลงองค์ประกอบกว้างและความสูง |
| scaleX(n) | กำหนดเปลี่ยนแปลงขนาด 2D, การเปลี่ยนความกว้างขององค์ประกอบ |
| scaleY(n) | กำหนดเปลี่ยนแปลงขนาด 2D, เปลี่ยนความสูงขององค์ประกอบ |
| rotate(angle) | กำหนดหมุน 2D, มุมที่ระบุไว้ในพารามิเตอร์ |
| skew(x-angle,y-angle) | กำหนดเปลี่ยนแปลงลาด 2D พร้อมแกน X และแกน Y |
| skewX(angle) | กำหนดเปลี่ยนแปลงลาด 2D ตามแนวแกน X |
| skewY(angle) | กำหนดเปลี่ยนแปลงลาด 2D ตามแนวแกน Y |