CSS3 เปลี่ยนสถานที่ให้บริการ
ตัวอย่าง
ส่วน div หมุน:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
{
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 มิติเพื่อกำหนดมุมมองมุมมอง |
ตัวอย่างเพิ่มเติม
หมุนรูปภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้าง "โพลารอยด์" ภาพถ่ายและภาพหมุน