<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css skew 倾斜</title>
<style>
/*参考：
http://www.lvyestudy.com/css3/css3_9.5.aspx
https://www.cnblogs.com/mr-yuan/p/5899299.html
知识点：
0.（我的）坐标系：
原点o，元素的左上角。
x轴，水平向右，
y轴，竖直向下。
注意：坐标系可以个人理解/选择。
1.skew(x, y)，倾斜/拉伸/挤压。
x,y, 可以是，如：30deg，-30deg。
x，以转换原点（transform-origin）为基点，把元素的竖直边向水平方向倾斜，
使竖直方向产生 x 夹角，元素水平边保持水平。
y，以转换原点（transform-origin）为基点，把元素的水平边向竖直方向倾斜，
使水平方向产生 y 夹角，元素竖直边保持竖直。
2.倾斜效果。
+x,则竖直边由+y轴向+x轴方向倾斜。
-x,则竖直边由+y轴向-x轴方向倾斜。
+y,则水平边由+x轴向+y轴方向倾斜。
-y,则水平边由+x轴向-y轴方向倾斜。
3.skew()方法跟 translate(), scale()方法一样，也有3种情况：
1.skewX(x) <=> skew(x, 0)
skewX()，两个竖直边向 X 轴倾斜且保持平行，拉长宽度，保持高度。
2.skewY(y) <=> skew(0, y)
skewY()，两个水平边向 Y 轴倾斜且保持平行，拉长高度，保持宽度。
3.skew(x,y)，会先按照 skewX() 方法倾斜，然后按照 skewY() 方法倾斜；
同时拉长宽高。
4.语法如：transform:skewX(x);
*/
#origin {
width: 200px;
height: 200px;
margin: 100px auto; /*水平居中*/
border: 1px dashed silver;
}
#current {
width: 200px;
height: 200px;
background-color: #3EDFF4;
color: white;
text-align: center;
line-height: 200px;
transition: all 1s;
}
#current:hover{
/*transform: skewX(30deg);*/
/*transform: skewY(30deg);*/
transform: skew(30deg, 30deg);
transform-origin: left top;
}
</style>
</head>
<body>
<div id="origin">
<div id="current">这是一段文字。</div>
</div>
</body>
</html>
