ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Index VDO Reenigne – คุณวีรศักดิ์ - odoo 10
โดย Four พ 17 ม.ค. 2018 2:33 pm บอร์ด MT22 - อิษยา งามสอาด
0
5
พ 17 ม.ค. 2018 2:33 pm โดย Four
งานประจำวันที่ 17 มกราคม 2561
โดย Four พ 17 ม.ค. 2018 9:56 am บอร์ด MT22 - อิษยา งามสอาด
2
12
พ 17 ม.ค. 2018 1:26 pm โดย AePongsak
Work's on Hand ปาริชาติ รัตโณภาส MT21
โดย Parichat จ 08 ม.ค. 2018 12:11 pm บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
44
พ 17 ม.ค. 2018 10:51 am โดย Parichat
งานประจำวันที่ 17 มกราคม 2561
โดย Parichat พ 17 ม.ค. 2018 9:47 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
8
34
พ 17 ม.ค. 2018 2:42 pm โดย Parichat
ไอเดียในการออกแบบ iphone8
โดย Before Dong พ 17 ม.ค. 2018 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
พ 17 ม.ค. 2018 10:29 am โดย Before Dong
งานประจำวันที่ 17 มกราคม 2561
โดย Jom07 พ 17 ม.ค. 2018 9:57 am บอร์ด MT23 - สุพรรษา พูลตา
1
11
พ 17 ม.ค. 2018 10:44 am โดย Jom07
เจอปัญหานี้บ่อย สำหรับ app ที่อยู่บน pgsql เยอะๆ psql: FATAL: too many connections for role "user_name".
โดย mindphp พ 17 ม.ค. 2018 4:50 am บอร์ด PostgreSQL
1
8
พ 17 ม.ค. 2018 4:51 am โดย mindphp
Thin Client คืออะไร
โดย Jom07 อ 16 ม.ค. 2018 2:38 pm บอร์ด Software testing
0
16
อ 16 ม.ค. 2018 2:38 pm โดย Jom07
วิธีนอน 8 ชั่วโมง ใน 4 ชั่วโมง
โดย Before Dong อ 16 ม.ค. 2018 10:21 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
38
อ 16 ม.ค. 2018 10:21 am โดย Before Dong
งานประจำวันที่ 16 มกราคม 2561
โดย Four อ 16 ม.ค. 2018 9:46 am บอร์ด MT22 - อิษยา งามสอาด
2
38
อ 16 ม.ค. 2018 3:39 pm โดย Four
งานประจำวันที่ 16 มกราคม 2561
โดย Jom07 อ 16 ม.ค. 2018 9:44 am บอร์ด MT23 - สุพรรษา พูลตา
2
35
อ 16 ม.ค. 2018 2:21 pm โดย Jom07
งานประจำวันที่ 16 มกราคม 2561
โดย Parichat อ 16 ม.ค. 2018 9:40 am บอร์ด MT21 - ปาริชาติ รัตโณภาส
2
20
อ 16 ม.ค. 2018 7:12 pm โดย Parichat
เบอร์โทร ศูนย์บริการ ASUS ศูนย์บริการลูกค้าสัมพันธ์ (Call Center) ถามอะไหล่ ค่าบริการงานซ่อมได้
โดย mindphp อ 16 ม.ค. 2018 6:53 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
15
อ 16 ม.ค. 2018 6:53 am โดย mindphp
ตามหา พัดลมโน๊ตบุ๊ค ASUS รุ่น Pro36S ของ dc brushless
โดย mindphp อ 16 ม.ค. 2018 6:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
9
อ 16 ม.ค. 2018 6:29 am โดย mindphp
จะโหลด Android Studio กับ javaJDK ได้ที่ไหนค่ะ
โดย Anonymous จ 15 ม.ค. 2018 8:29 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
1
23
จ 15 ม.ค. 2018 9:25 pm โดย thatsawan
การใช้งานคำสั่ง inner join ใน SQL(เอสคิวเเอล)
โดย Parichat จ 15 ม.ค. 2018 5:50 pm บอร์ด SQL Knowledge
0
20
จ 15 ม.ค. 2018 5:50 pm โดย Parichat
ประเภทของ Firewall (ไฟร์วอลล์)
โดย Jom07 จ 15 ม.ค. 2018 5:42 pm บอร์ด Software testing
0
21
จ 15 ม.ค. 2018 5:42 pm โดย Jom07
เทคนิคการโอนย้ายข้อมูล 2 คอมพิวเตอร์
โดย Jom07 จ 15 ม.ค. 2018 5:41 pm บอร์ด Software testing
0
20
จ 15 ม.ค. 2018 5:41 pm โดย Jom07
Android Studio ไม่อนุญาตให้กรอกข้อมูลใน EditText
โดย Four จ 15 ม.ค. 2018 4:53 pm บอร์ด Mobile Application Developing- Android, iOS
0
14
จ 15 ม.ค. 2018 4:53 pm โดย Four
Android Studio การกำหนดขนาดข้อความใน TextView
โดย Four จ 15 ม.ค. 2018 2:50 pm บอร์ด Mobile Application Developing- Android, iOS
0
14
จ 15 ม.ค. 2018 2:50 pm โดย Four