圖形解析理解 css3 之傾斜屬性skew()


1、作用
改變元素在頁面中的形狀
2、語法
屬性:transform
函數:
1、skew(xdeg)
向橫向傾斜指定度數
x取值為正,X軸不動,y軸逆時針傾斜一定角度
x取值為負,X軸不動,y軸順時針傾斜一定角度
skew(30deg)
2、skew(xdeg,ydeg)
ydeg : 縱向傾斜度數
y取值為正,y軸不動,x軸順時針傾斜一定角度
y取值為負,y軸不動,x軸逆時針傾斜一定角度
3、skewX(xdeg)
4、skewY(ydeg)
3.應用和理解
<!doctype html>
<html lang="zh-cn">
<head>
<title>Insert a title</title>
<meta charset="utf-8">
<style>
#d1,#d2{
width:200px;
height:200px;
position:absolute;
left:400px;
top:200px;
}
#d1{
background-color:#ddd;
border:1px solid #333;

}
#d2{
background-color:pink;
border:1px solid orange;
opacity:0.5;
transform:skew(45deg);
}
</style>
</head>
<body>
<div id="d1">參考元素</div>
<div id="d2">轉換元素</div>
</body>
</html>
效果圖:

效果圖解析:

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM