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

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

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

docman
, บทที่ 6 CSS3 2D Transforms ตอน 1 ทำวัตถุให้เอียง - by บทเรียน CSS,
2 5 1 5
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - สอบถามทำให้ mouse over ที่ไอคอนรูปวงกลม แล้วให้แสดงรูปที่เป็นข้อความขึ้น
โดย eange08 ศ 05 มี.ค. 2021 4:52 pm บอร์ด Joomla Dev
1
4
ศ 05 มี.ค. 2021 5:47 pm โดย tsukasaz
กลุ่มประเทศผู้ส่งออกข้าว
โดย jataz2 ศ 05 มี.ค. 2021 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
ศ 05 มี.ค. 2021 11:07 am โดย jataz2
Q - พอมี module หรือ plugin ที่เป็นพวก social อย่าง line, ig บ้างไหมค่ะ
โดย eange08 พฤ 04 มี.ค. 2021 5:21 pm บอร์ด Joomla Dev
1
7
พฤ 04 มี.ค. 2021 5:26 pm โดย tsukasaz
reboot เครื่องไม่ได้ครับ
โดย chakirin.bfds พฤ 04 มี.ค. 2021 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
27
พฤ 04 มี.ค. 2021 3:14 pm โดย chakirin.bfds
แก้ css ส่วน padding ด้วย override แล้วไม่เปลี่ยนตาม
โดย eange08 พ 03 มี.ค. 2021 4:43 pm บอร์ด Joomla Development
1
19
พ 03 มี.ค. 2021 4:47 pm โดย tsukasaz
Joomla PDPA ใช้ EB Sticky Cookie Notice โมดูล แสดงแจ้งเตือนการเก็บข้อมูล Cookie ของผู้ใช้งาน
โดย tsukasaz พ 03 มี.ค. 2021 4:39 pm บอร์ด Joomla Extension Review
0
16
พ 03 มี.ค. 2021 4:39 pm โดย tsukasaz
อัพเดทหรือยัง? ปรับปรุงเรื่องความปลอดภัย 9 จุด ใน Joomla 3.9.25
โดย tsukasaz พ 03 มี.ค. 2021 12:28 pm บอร์ด MindPHP News & Feedback
0
38
พ 03 มี.ค. 2021 12:28 pm โดย tsukasaz
B - เปิดหน้าเว็บด้วย template เป็น Shaper_megadeal_ii แล้ว Error 404
โดย eange08 พ 03 มี.ค. 2021 12:04 pm บอร์ด เว็บไซต์ Rnyard - Tester
2
7
พ 03 มี.ค. 2021 7:25 pm โดย tsukasaz