บทที่ 6 CSS3 2D Transforms ตอน 2
2.การปรับขนาดวัตถุ
transform:scale(x,y); x คือ ตัวเลขในแนวนอนเป็นการปรับความกว้าง และ y คือตัวเลขในแนวตั้ง เป็นการปรับความสูง
<html>
<head>
<style>
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;}
div#div2
{margin:100px;
transform:scale(2,3);
-ms-transform:scale(2,3); /* IE 9 */
-moz-transform:scale(2,3); /* Firefox */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-o-transform:scale(2,3); /* Opera */}
</style>
</head>
<body>
<div>mindphp.com</div>
<div id="div2">mindphp.com</div>
</body>
</html>ผลลลัพธ์คือ
คำอธิบาย
width:100px;
height:75px;
background-color:pink;
border:1px solid black; คือรูปสี่เหลี่ยม กว้าง 100px ยาว 75px สีชมพู ขอบสีดำ
ส่วน transform:scale(2,3); คือคำสั่งปรับขนาดวัตถุ โดยปรับ กว้างขึ้น 2 เท่า และ ยาวขึ้น 3 เท่า
อ่าน
บทที่ 6 CSS3 2D Transforms ตอน 1
บทที่ 6 CSS3 2D Transforms ตอน 3
บทที่ 6 CSS3 2D Transforms ตอน 4
บทที่ 6 CSS3 2D Transforms ตอน 5
