matrix.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){
transform:matrix(0.8,0,0.707,1,0,0);
/*
matrix(a,c,e,b,d,f)
a : scaleX();
c : skewY() ==> sin(角度) = 0.5 角度 30deg
e ：skewX(45deg) ==> sin(45) = 0.707 ===> 45deg
b ：scaleY()
d : translateX();
f : translateY();
*/
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
