บทที่ 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
