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

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

บทที่ 6 CSS3 2D Transforms ตอน 4
4.การพลิกวัตถุ
    transform:skew(x,y);  x คือ ตัวเลขในแนวนอน เป็นการพลิกวัตถุไปซ้ายหรือขวาตามแนวนอน   และ y คือตัวเลขในแนวตั้ง เป็นการพลิกวัตถุขึ้นบนหรือลงข้างล่าง ตามแนวตั้ง

<html>
<head>
<style> 
div
{width:100px;
height:75px;
background-color:pink;
border:1px solid black;}

div#div2
{transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(20deg,10deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */}

</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

ผลลัพธ์คือ

คำอธิบาย
   การใส่ค่าตัวเลขในตำแหน่ง (x ,y) ในคำสั่ง  transform:skew(x,y);   นี้หากใส่ค่าตัวเลขในตำแหน่ง x เป็นบวกวัตถุจะพลิกไปด้านซ้าย และถ้าใส่ค่าตัวเลขเป็นลบวัตถุจะพลิกไปด้านขวา  ส่วนการใส่ค่าตัวเลขในตำแหน่ง y ถ้าใส่เป็นบวกวัตถุจพลิกลงข้างล่าง แต่ถ้าใส่เป็นลบวัตถุจะพลิกขึ้นข้างบน

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
จะทำอย่างไรให้เราดึงชื่อรูปออกมาได้จากพาดยาว ๆ ครับ
โดย jamepiyawat จ 25 พ.ย. 2019 4:44 pm บอร์ด Programming - PHP
1
30
จ 25 พ.ย. 2019 4:45 pm โดย tsukasaz
โปรแกรมคำนวณอัตราแลกเปลี่ยนสกุลเงิน
โดย prmindphp จ 25 พ.ย. 2019 4:26 pm บอร์ด MindPHP News & Feedback
0
26
จ 25 พ.ย. 2019 4:26 pm โดย prmindphp
โปรแกรมตรวจสอบหมายเลขพัสดุ
โดย prmindphp จ 25 พ.ย. 2019 4:12 pm บอร์ด MindPHP News & Feedback
0
37
จ 25 พ.ย. 2019 4:12 pm โดย prmindphp
นิยามของสินทรัพย์ หนี้สิน และส่วนของเจ้าของ
โดย Chidchanok อ 15 ม.ค. 2019 6:13 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
1491
จ 25 พ.ย. 2019 3:39 pm โดย mindphp
VDO - Program Convert Area
โดย numtan5839 จ 25 พ.ย. 2019 3:16 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
25
พ 27 พ.ย. 2019 2:29 am โดย mindphp
งานประจำวันที่ 25 พฤศจิกายน 2562
โดย numtan5839 จ 25 พ.ย. 2019 10:13 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
1
17
จ 25 พ.ย. 2019 7:22 pm โดย numtan5839
วิธีการลงทุนที่ดีที่สุดสำหรับ "มนุษย์เงินเดือน"
โดย somying อ 12 พ.ย. 2019 12:13 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
262
จ 25 พ.ย. 2019 5:58 am โดย tidehunter
ไปรษณีย์ไทยเอาใจ e-commerce ด้วยบริการ ePacket
โดย numtan5839 ส 09 พ.ย. 2019 11:21 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
190
จ 09 ธ.ค. 2019 3:21 pm โดย LEG
อัพเดดความคืบหน้า / Progress - AZKing
โดย mindphp อ 29 มิ.ย. 2014 5:47 pm บอร์ด AZKing (Main)
598
3298
อ 03 ธ.ค. 2019 6:34 pm โดย thatsawan
insert แล้วไม่ขึ้น error ไม่มีข้อความไดเกิดขึ้น ไม่บันทึกข้อมูลลงฐานข้อมูลด้วยคับ
โดย สายลม พ 06 พฤษภาคม 2015 8:20 am บอร์ด Programming - PHP
6
3389
ส 23 พ.ย. 2019 9:50 pm โดย Weerawut Wongdang
Animation ประกอบ Tools
โดย numtan5839 ส 23 พ.ย. 2019 7:21 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
8
56
ศ 13 ธ.ค. 2019 6:37 pm โดย numtan5839
ข้อแตกต่าง ระหว่าง ฟังก์ชัน onContentBeforeDisplay กับ onContentAfterDisplay
โดย bankjittapol ส 23 พ.ย. 2019 6:56 pm บอร์ด Joomla Developing Knowledge
0
41
ส 23 พ.ย. 2019 6:56 pm โดย bankjittapol
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
โดย bankjittapol ส 23 พ.ย. 2019 6:20 pm บอร์ด CSS Knowledge
0
47
ส 23 พ.ย. 2019 6:20 pm โดย bankjittapol
งานประจำวันที่ 23 พฤศจิกายน 2562
โดย numtan5839 ส 23 พ.ย. 2019 10:17 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
6
29
ส 23 พ.ย. 2019 7:22 pm โดย numtan5839
จะแปลง {new} {/new} {update} {/update} {bug} {/bug} ให้เป็นตามรูปยังไงครับ(ตามรูปที่แนบไว้)
โดย bankjittapol ส 23 พ.ย. 2019 5:08 pm บอร์ด Joomla Development
0
60
ส 23 พ.ย. 2019 5:08 pm โดย bankjittapol
จะเอาเลขเวอร์ชั่น และวันที่ ที่อยู่ข้างใน {version} ออกมายังไงครับ
โดย bankjittapol ส 23 พ.ย. 2019 3:39 pm บอร์ด Joomla Development
2
62
ส 23 พ.ย. 2019 3:56 pm โดย bankjittapol
มาแล้ว !! Plugin MDEmbed สร้าง Link อัพวีดีโอบทความ เว็บไซต์ Joomla 2.5, 3.x
โดย Patipat ศ 30 ส.ค. 2019 5:46 pm บอร์ด MindPHP News & Feedback
1
301
ส 23 พ.ย. 2019 11:11 am โดย mindphp
รวม แนะนำโปรแกรม POS (ระบบขายหน้าร้าน)
โดย nipon09 พฤ 06 พ.ย. 2014 7:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
5
7609
ส 23 พ.ย. 2019 1:30 am โดย nightstalker
การใช้ text-align เพื่อจัดข้อความ
โดย bankjittapol ศ 22 พ.ย. 2019 6:28 pm บอร์ด CSS Knowledge
0
59
ศ 22 พ.ย. 2019 6:28 pm โดย bankjittapol
อยากทราบคำสั่ง joomla ที่จะทำให้ย่อยรูปได้ครับ
โดย jamepiyawat ศ 22 พ.ย. 2019 5:53 pm บอร์ด Joomla Development
1
76
ศ 22 พ.ย. 2019 8:35 pm โดย mindphp