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 มิติเพื่อกำหนดมุมมองมุมมอง |
ตัวอย่างเพิ่มเติม
หมุนรูปภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้าง "โพลารอยด์" ภาพถ่ายและภาพหมุน