ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ขอวิธีเช็คเว็บไซด์ที่มาจาก Google 10 หน้าแรกหน่อยค่ะ
โดย Kannaphat ส 27 ก.พ. 2021 4:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
20
ส 27 ก.พ. 2021 4:59 pm โดย Kannaphat
Review เว็บไซต์ หางานที่ต่างๆ
โดย fighthrmd125 ส 27 ก.พ. 2021 3:13 pm บอร์ด Share Knowledge
0
18
ส 27 ก.พ. 2021 3:13 pm โดย fighthrmd125
PDPA กับงาน HR ของบริษัท
โดย fighthrmd125 ส 27 ก.พ. 2021 1:48 pm บอร์ด Share Knowledge
0
20
ส 27 ก.พ. 2021 1:48 pm โดย fighthrmd125
ประโยชน์ของ การใช้ Skype และ Web board ในการทำงาน
โดย fighthrmd125 ส 27 ก.พ. 2021 12:23 pm บอร์ด Share Knowledge
0
17
ส 27 ก.พ. 2021 12:23 pm โดย fighthrmd125
การจ้างงานผู้พิการ
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:53 pm บอร์ด Share Knowledge
0
18
พฤ 25 ก.พ. 2021 5:53 pm โดย fighthrmd125
แนวทางการสรรหา ช่องทาง สรรหาผู้พิการเข้าทำงาน
โดย fighthrmd125 พฤ 25 ก.พ. 2021 5:12 pm บอร์ด Share Knowledge
0
13
พฤ 25 ก.พ. 2021 5:12 pm โดย fighthrmd125
Google Structured ส่วนการ vote ในบทความจะดึงข้อมูลมาจากไหนค่ะ
โดย eange08 พฤ 25 ก.พ. 2021 5:04 pm บอร์ด Joomla Development
1
18
พฤ 25 ก.พ. 2021 5:34 pm โดย eange08
B - ระบบ LINE API ไม่ตอบพบข้อมูล [2021-02][001]
โดย tsukasaz พฤ 25 ก.พ. 2021 3:35 pm บอร์ด MlineCRM Line + MD-CRM
2
8
จ 01 มี.ค. 2021 11:23 am โดย tsukasaz