ตัวอย่าง
หมุน <div> องค์ประกอบ:
div
{
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
ลองตัวเอง» ความหมายและการใช้งาน
สถานที่ให้บริการเปลี่ยนใช้การแปลง 2D หรือ 3D เพื่อองค์ประกอบ คุณสมบัตินี้จะช่วยให้คุณสามารถหมุน, ขนาด, ย้ายเอียง ฯลฯ องค์ประกอบ
เพื่อทำความเข้าใจการแปลงทรัพย์สิน ดูการสาธิต
| ค่าเริ่มต้น: | none |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | yes. Read about animatable Try it |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.transform="rotate(7deg)" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit-, -moz- หรือ -o- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| 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- |
วากยสัมพันธ์
transform: none|transform-functions|initial|inherit;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| none | กำหนดว่าควรจะมีการเปลี่ยนแปลงไม่ | เล่น " |
| matrix( 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 โดยใช้เมทริกซ์ 4x4 16 ค่า | |
| translate( x,y ) | กำหนดแปล 2D | เล่น " |
| translate3d( x,y,z ) | กำหนดแปล 3D | |
| translateX( x ) | กำหนดแปลโดยใช้เพียงค่าสำหรับแกน X | เล่น " |
| translateY( y ) | กำหนดแปลโดยใช้เพียงค่าสำหรับแกน Y | เล่น " |
| translateZ( z ) | กำหนดแปล 3D โดยใช้เพียงค่าสำหรับแกน Z | |
| scale( x,y ) | กำหนดเปลี่ยนแปลงขนาด 2D | เล่น " |
| scale3d( x,y,z ) | กำหนดขนาดการเปลี่ยนแปลง 3D | |
| scaleX( x ) | กำหนดขนาดการเปลี่ยนแปลงโดยให้ค่าสำหรับแกน X | เล่น " |
| scaleY( y ) | กำหนดขนาดการเปลี่ยนแปลงโดยให้ค่าสำหรับแกน Y | เล่น " |
| scaleZ( z ) | กำหนดขนาดการเปลี่ยนแปลง 3D โดยให้ค่าสำหรับแกน Z | |
| rotate( angle ) | กำหนดหมุน 2D, มุมที่ระบุไว้ในพารามิเตอร์ | เล่น " |
| rotate3d( x,y,z,angle ) | กำหนดหมุน 3D | |
| rotateX( angle ) | กำหนดหมุน 3D พร้อมแกน X | เล่น " |
| rotateY( angle ) | กำหนดหมุน 3D พร้อมแกน Y | เล่น " |
| rotateZ( angle ) | กำหนดหมุน 3D พร้อมแกน Z | เล่น " |
| skew( x-angle,y-angle ) | กำหนดเปลี่ยนแปลงลาด 2D พร้อมแกน X และแกน Y | เล่น " |
| skewX( angle ) | กำหนดเปลี่ยนแปลงลาด 2D ตามแนวแกน X | เล่น " |
| skewY( angle ) | กำหนดเปลี่ยนแปลงลาด 2D ตามแนวแกน Y | เล่น " |
| perspective( n ) | กำหนดมุมมองสำหรับองค์ประกอบ 3D เปลี่ยน | |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ภาพโยนบนโต๊ะ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้าง "polaroid" ภาพและหมุนภาพ
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS 2D แปลง
กวดวิชา CSS: CSS 3D แปลง
อ้างอิง HTML DOM: transform property