位置:首頁(yè) > 軟件操作教程 > 編程開(kāi)發(fā) > CSS > 問(wèn)題詳情

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>

<meta charset="UTF-8">

<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>

<div></div>

<div></div>

<div></div>

</body>

</html>

image.png

繼續(xù)查找其他問(wèn)題的答案?

相關(guān)視頻回答
回復(fù)(0)
返回頂部