บทที่ 6 CSS3 2D Transforms ตอน 1
   ใน CSS3 เราสามารถเปลี่ยนรูปร่างของวัตถุต่างๆ ไม่ว่าจะ เปลี่ยนตำแหน่ง ,ปรับขนาด  ,ปรับความเอียง ,หมุน , และยืด รูปภาพ

   CSS3 สามารถใช้ได้กับทุกบราวเซอร์ แต่มีเงื่อนไขดังนี้
   -ใน Internet Explorer 9 ต้องใส่ -ms-. นำหน้าโค๊ดคำสั่ง เช่น -ms-transform:rotate(30deg); /* IE 9 */
   -ใน Firefox ต้องใส่ -moz-. นำหน้าโค๊ดคำสั่ง เช่น  -moz-transform:rotate(30deg); /* Firefox */
   -ใน Chrome and Safari ต้องใส่ -webkit-. นำหน้าโค๊ดคำสั่ง เช่น  -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -ใน Opera ต้องใส่  -o-. นำหน้าโค๊ดคำสั่ง เช่น  -o-transform:rotate(30deg); /* Opera */

1.การทำให้วัตถุเอียง
   transform:rotate(ค่าตัวเลขการเอียง deg); 
ทั้งนี้การใส่ค่าตัวเลขนี้ หากใส่เป็น 0 คือไม่มีการเอียง ถ้าเป็นบวกหรือเลขปกติวัตถุจะเอียงไปด้านขวา ถ้าเป็นลบวัตถุจะเอียงไปด้านซ้าย

<html>
<head>
<style> 
div
{
width:70px;
height:100px;
background-color:pink;

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
</head>
<body>

<div>pocky</div>

</body>
</html>

ผลลัพธ์คือ

คำอธิบาย
width:70px; 
height:100px;
background-color:pink;

คือรูปสี่เหลี่ยม กว้าง 70px   ยาว 100px  สีชมพู

transform:rotate(30deg); คือคำสั่งให้วัตถุเอียง โดยเอียงไปด้านขวา 30deg

อ่านเพิ่มเติม
บทที่ 6 CSS3 2D Transforms ตอน 2
บทที่ 6 CSS3 2D Transforms ตอน 3
บทที่ 6 CSS3 2D Transforms ตอน 4
บทที่ 6 CSS3 2D Transforms ตอน 5

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
โดย admeadme พฤ 25 ม.ค. 2024 9:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
623
พฤ 25 ม.ค. 2024 9:23 am โดย admeadme View Topic หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
โดย Thanavat_n พ 24 ม.ค. 2024 4:28 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
374
พ 24 ม.ค. 2024 4:29 pm โดย Thanavat_n View Topic ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
โดย Anonymous อ 23 ม.ค. 2024 10:46 am บอร์ด Programming - PHP
1
1369
พ 24 ม.ค. 2024 7:47 am โดย mindphp View Topic ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
โดย worramaitk พฤ 18 ม.ค. 2024 5:17 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
632
พฤ 18 ม.ค. 2024 5:17 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
ภาษา Lua ตอนที่ 8 : ตัวดำเนินการ
โดย worramaitk พฤ 18 ม.ค. 2024 4:55 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
483
พฤ 18 ม.ค. 2024 4:55 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 8 : ตัวดำเนินการ
ภาษา Lua ตอนที่ 7 : ชนิดข้อมูล Table (2)
โดย worramaitk พฤ 18 ม.ค. 2024 4:02 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
708
พฤ 18 ม.ค. 2024 4:02 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 7 : ชนิดข้อมูล Table (2)
ภาษา Lua ตอนที่ 6 : ชนิดข้อมูล Table (1)
โดย worramaitk พฤ 18 ม.ค. 2024 3:34 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
296
พฤ 18 ม.ค. 2024 3:34 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 6 : ชนิดข้อมูล Table (1)
การใช้งานโปรแกรมเครื่องคิดเลขโอเพนซอร์ส Qalculate! สำหรับคำนวณสิ่งต่างๆ ในชีวิตประจำวัน
โดย worramaitk พฤ 18 ม.ค. 2024 3:10 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
197
พฤ 18 ม.ค. 2024 3:10 pm โดย worramaitk View Topic การใช้งานโปรแกรมเครื่องคิดเลขโอเพนซอร์ส Qalculate! สำหรับคำนวณสิ่งต่างๆ ในชีวิตประจำวัน