圖形解析理解 css3 之傾斜屬性skew()
阿新 • • 發佈：2018-05-10
pac left absolute IT itl 技術分享 .com head idt
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>
效果圖：
效果圖解析：
圖形解析理解 css3 之傾斜屬性skew()