语法：
transform:skewX(x);/*沿X轴方向倾斜*/transform:skewY(y);/*沿Y轴方向倾斜*/transform:skew(x,y);/*沿X轴和Y轴同时倾斜*/
说明：
跟translate()、scale()方法类似，倾斜也有3种情况：skewX()、skewY()、skew()。
参数x表示元素在x轴方向的倾斜度数，单位为deg（即degree的缩写）。如果度数为正，则表示元素沿下x轴方向逆时针倾斜；如果度数为负，则表示元素沿x轴方向顺时针倾斜。
参数y表示元素在y轴方向的倾斜度数，单位为deg。如果度数为正，则表示元素沿y轴方向顺时针倾斜；如果度数为负，则表示元素沿y轴方向逆时针倾斜。
对于倾斜的方向，大家不需要去记忆，因为在实际开发中，稍微测试一下就知道了。
举例：skewX(x)
在线测试<!DOCTYPEhtml><html><head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
/*设置原始元素样式*/
#origin
{width:200px;height:100px;border:1pxdashedgray;
}/*设置当前元素样式*/
#current
{width:200px;height:100px;color:white;background-color:lightskyblue;transform:skewX(30deg);
}</style></head><body>
<divid="origin">
<divid="current"></div>
</div></body></html>浏览器预览效果如下图所示。
网页设计css，css渐变消失，原生js赋值css，width减法css3，css 三角号，css旋转图片怎么加链接，iecss3.htc 官方下载
分析：
transform:skewX(30deg);表示元素沿x轴方向逆时针倾斜30°。如果把30°改为-30°，则元素会沿x轴方向顺时针倾斜30°，此时预览效果如下图所示。
网页设计css，css渐变消失，原生js赋值css，width减法css3，css 三角号，css旋转图片怎么加链接，iecss3.htc 官方下载
实际上，transform:skewX(30deg);其实可以等价于transform:skew(30deg, 0);，小伙伴们可以自行测试一下。此外在实际开发中，如果忘了究竟什么时候顺时针倾斜，什么时候逆时针倾斜，只需要稍微写一小段代码测试一下就知道了。
对于初学者来说，可能一时半会看不出skewX()方法是怎么一回事。其实skewX()方法的变形原理是这样的：由于元素限定了高度为100px，而skewX()方法是沿着x轴方向倾斜的。因此只要倾斜角度不超过180°，元素都会保持100px的高度，同时为了保持倾斜，元素只能沿着x轴方向拉长本身。
举例：skewY(y)
在线测试<!DOCTYPEhtml><html><head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
/*设置原始元素样式*/
#origin
{width:200px;height:100px;border:1pxdashedgray;
}/*设置当前元素样式*/
#current
{width:200px;height:100px;color:white;background-color:lightskyblue;transform:skewY(30deg);
}</style></head><body>
<divid="origin">
<divid="current"></div>
</div></body></html>浏览器预览效果如下图所示。
网页设计css，css渐变消失，原生js赋值css，width减法css3，css 三角号，css旋转图片怎么加链接，iecss3.htc 官方下载
分析：
transform:skewY(30deg);表示元素沿y轴方向顺时针倾斜30°。如果把30°改为-30°，则元素会沿y轴方向逆时针倾斜30°，此时预览效果如下图所示。
网页设计css，css渐变消失，原生js赋值css，width减法css3，css 三角号，css旋转图片怎么加链接，iecss3.htc 官方下载
实际上，transform:skewY(30deg);其实可以等价于transform:skew(0, 30deg);，小伙伴们可以自行测试一下。
举例：skew(x, y)
在线测试<!DOCTYPEhtml><html><head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
/*设置原始元素样式*/
#origin
{width:200px;height:100px;border:1pxdashedgray;
}/*设置当前元素样式*/
#current
{width:200px;height:100px;color:white;background-color:lightskyblue;transform:skew(10deg,20deg);
}</style></head><body>
<divid="origin">
<divid="current"></div>
</div></body></html>浏览器预览效果如下图所示。
网页设计css，css渐变消失，原生js赋值css，width减法css3，css 三角号，css旋转图片怎么加链接，iecss3.htc 官方下载
分析：
transform:skew(10deg, 20deg);表示元素同时在x轴和y轴两个方向倾斜，x轴方向逆时针倾斜10°，y轴方向顺时针倾斜20°。如果把10deg改为-10deg，20deg改为-20deg，此时预览效果如下图所示。
网页设计css，css渐变消失，原生js赋值css，width减法css3，css 三角号，css旋转图片怎么加链接，iecss3.htc 官方下载
实际上，transform:skew(10deg, 20deg);其实可以等价于以下代码：
transform:skewX(10deg);transform:skewY(20deg);