skew.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew</title>
<style type="text/css">
div{
width:200px;
height: 100px;
background: -webkit-linear-gradient(left,orange 30%,red 100%);
margin: 50px;
transition: 1s all ease;
}
div:nth-child(2):hover{
/*transform:skew(45deg,45deg);*/
transform:skewY(45deg) skewX(45deg);
/*transform:skew(30deg);
1.如果写一个参数 ，默认 第二个 参数为0 表示只是水平拉伸 围绕 x轴 倾斜 一定角度
正数代表往里面倾斜 ,
2.transform:skewX(); 表示只是水平拉伸 围绕 x轴 倾斜 一定角度
3.transform:skewY(); 表示只是垂直拉伸 围绕 Y轴 倾斜 一定角度
4.transform:skewY(45deg) skewX(45deg) 表示先执行前面 拉伸，再执行后面的拉伸 ;
5.transform:skew(45deg,45deg) 表示 水平 垂直 同步拉伸 45deg
*/
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
网友评论