CSS3 2D轉(zhuǎn)換 4.傾斜skew( )

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

skew()的語(yǔ)法如下:

transform:skew(〈angle〉 [,〈angle〉]):

包含兩個(gè)參數(shù)，分別表示X軸和Y軸傾斜的角度。如果第二個(gè)參數(shù)力空，則默認(rèn)為0。如果參數(shù)為負(fù)，則表示向相反方向傾斜：

?skewX(<angle>)：表示只在父軸（水平方向）傾斜0

?skewY(<angle>)：表示只在Y軸（垂直方向）傾斜。

可以通過(guò)一個(gè)實(shí)例來(lái)理解此功能。

【例題】使用skew()方法

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

div{

width: 200px;

height: 200px;

margin:10px auto;

}

.d1{

background: blue;

}

.d2{

transform: skew(30deg);

background: red;

}

.d3{

transform: skew(50deg);

background: green;

}

</style>

</head>

<body>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)