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

CSS3 เปลี่ยนสถานที่ให้บริการ

ตัวอย่าง

ส่วน div หมุน:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

ลอง»

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน

ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก

属性
transform (2D) 36.0
4.0 -webkit-
10.0
9.0 -ms-
16.0
3.5 -moz-
9.0
3.2 -webkit-
23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-
12.0 10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-

แอตทริบิวต์คำจำกัดความและคำแนะนำ

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

เพื่อทำความเข้าใจคุณสมบัติที่เปลี่ยนให้ดู อินสแตนซ์ออนไลน์

เริ่มต้น: ไม่มีเลย
มรดก: ไม่
เวอร์ชัน: CSS3
ไวยากรณ์ javascript: วัตถุ .style.transform = "หมุน (7deg)"


ไวยากรณ์

เปลี่ยน:ไม่มี | เปลี่ยนฟังก์ชั่น;

ความคุ้มค่า ลักษณะ
ไม่มีเลย ความหมายไม่แปลง
เมทริกซ์ (N, N, N,N, N, N) กําหนดการแปลง 2D โดยใช้เมทริกซ์ของหกค่า
matrix3d (N, N, N,N, N, N, N, N, N, N, N, N, N, N, N, N) แปลง 3D กำหนดโดยใช้ค่า 16 4x4 เมทริกซ์
แปล(x, y) กําหนดการแปลง 2D
translate3d(x, y, z) กําหนดการแปลง 3D
translateX(x) ความหมายของการแปลง แต่มีค่าของแกน X
translateY(Y) ความหมายของการแปลง แต่มีค่าของแกน Y
translateZ(z) กําหนดการแปลงภาพ 3 มิติ แต่มีค่าของแกน z
ขนาด (x [Y]?) กําหนดการเปลี่ยนแปลงขนาด 2D
scale3d(x, y, z) กําหนดการเปลี่ยนแปลงขนาด 3D
scaleX(x) โดยการตั้งค่าของแกน X เพื่อกำหนดเปลี่ยนแปลงขนาด
scaleY(Y) โดยการตั้งค่าของแกน Y เพื่อกำหนดเปลี่ยนแปลงขนาด
scaleZ(z) การกําหนดการเปลี่ยนแปลงขนาด 3 มิติโดยการตั้งค่าของแกน Z ที่
หมุน(มุม) กำหนด 2D หมุนมุมที่กำหนดไว้ในการโต้แย้ง
rotate3d (X, Y, Z,มุม) กําหนดการหมุน 3D
rotateX(มุม) 3D X ถูกกำหนดพร้อมเพลา
rotateY(มุม) 3D แกน Y จะถูกกำหนดตามการหมุน
rotateZ(มุม) 3D แกน Z ถูกกำหนดตามการหมุน
เอียง (x มุม y-มุม) ที่กำหนดไว้ตามแนว 2D X และแกน Y เปลี่ยนแปลงเอียง
skewX(มุม) 2D แกน X จะถูกกำหนดตามความชอบของแปลง
skewY(มุม) ที่กำหนดไว้ตามแนวแกน Y เปลี่ยนแปลงลาด 2D
มุมมอง(N) องค์ประกอบการแปลงภาพ 3 มิติเพื่อกำหนดมุมมองมุมมอง


ตัวอย่าง

ตัวอย่างเพิ่มเติม

หมุนรูปภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้าง "โพลารอยด์" ภาพถ่ายและภาพหมุน

CSS3 เปลี่ยนสถานที่ให้บริการ
10/30