ให้เรตสมาชิก: 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 ถ้าใส่เป็นบวกวัตถุจพลิกลงข้างล่าง แต่ถ้าใส่เป็นลบวัตถุจะพลิกขึ้นข้างบน

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้ command prompt เพื่อตรวจสอบปัญหาและแกไข network เบื้องต้น
โดย salahuding จ 02 พ.ย. 2020 3:36 pm บอร์ด Share Knowledge
0
158
จ 02 พ.ย. 2020 3:36 pm โดย salahuding
วิธีเดืนทางจากยะลา มากทม
โดย salahuding จ 02 พ.ย. 2020 12:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
227
จ 02 พ.ย. 2020 12:29 pm โดย salahuding
ขอวิธีแก้ Error mysqli_real_connect(): (HY000/1045): Access denied for user 'root'@'localhost' (using password: NO)
โดย makup จ 02 พ.ย. 2020 11:31 am บอร์ด SQL - Database
6
372
จ 02 พ.ย. 2020 12:32 pm โดย makup
วิธีการติดตั้ง Font TH Sarabun PSK ใน Google document บนระบบปฎิบัตรการ Ubuntu
โดย Bellamy ส 31 ต.ค. 2020 7:43 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
92
ส 31 ต.ค. 2020 7:43 pm โดย Bellamy
การไล่สีพื้นหลังด้วยสีพาสเทลให้ชิคๆเก๋ๆ ด้วย Photoshop cc 2019
โดย Bellamy ส 31 ต.ค. 2020 6:44 pm บอร์ด Graphic design
0
117
ส 31 ต.ค. 2020 6:44 pm โดย Bellamy
การตัดตัวอักษรด้วย Photoshop cc 2019
โดย Bellamy ส 31 ต.ค. 2020 6:23 pm บอร์ด Graphic design
0
56
ส 31 ต.ค. 2020 6:23 pm โดย Bellamy
สอบถามค่ะเรื่องต้องการลดขนาดตัวเลข ใน Nimbus
โดย Bellamy ส 31 ต.ค. 2020 5:05 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
6
267
จ 02 พ.ย. 2020 1:29 pm โดย Bellamy
ไม่แสดงผลข้อมูลค้นหา , เมื่อมีการคลิกตัวปุ่มตัวอักษร ในส่วนเสริม Dictionary
โดย makup ส 31 ต.ค. 2020 4:16 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
4
168
ส 31 ต.ค. 2020 5:07 pm โดย makup