我刚刚接触transform的skew属性值时一头雾水,根本不知道种东西到底是咋变的。上网查,各个网站上也只说这个使用来做扭曲变换的,具体是咋变的就是不说。。。。无奈我只好自己研究了,现把研究结果共享一下。

首先说变换的时候坐标系是咋建的,如下图(transform-origin:0px 0px;)。

 

既然skew(...)的括号里放的是坐标轴旋转的角度,那么接下来说一下旋转正方向的问题。y轴顺时针转为正,X轴逆时针转为正。

之后图形就可以确定了,因为两轴的位置确定了,然后用仿射变换即可确定。

方法/步骤

  1. skew属性是个比较少用到的属性,至少我用的比较少。

    用的好的话会让你的网页烨烨生辉,用不好的话,则是一大败笔。

    CSS3新增样式大解析:[7]skew之元素变形
  2. 现在就具体的介绍skew的用法:

    语法:transform:skew(<angle> [,<angle>]);

    包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

    skewX(<angle>);表示只在X轴(水平方向)倾斜。

    skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

  3. 先放示例,效果如图:

    CSS3新增样式大解析:[7]skew之元素变形
  4. 现在我们来看参数为一个的情况:

    transform:skew(45deg);

    它等同于transform:skewX(45deg);

    可以看到demo标签向左倾斜45度,产生变形。

    之所以会产生变形的,这是因为我给元素限定了高度为300px,所以只要倾斜的角度不为180°的倍数,他都会保持着300的高度,同时为了保持倾斜,只能拉长本身。(围绕X轴倾斜,保持高度;围绕Y轴倾斜,保留宽度。)

    若倾斜解读为180的倍数,元素将不可见。

    CSS3新增样式大解析:[7]skew之元素变形
  5. 参数值为一个的第二种情况:

    transform:skewX(45deg);【这个步骤就不说了,上面以提到】

    transform:skewY(45deg);

    效果如下图

    CSS3新增样式大解析:[7]skew之元素变形
  6. 再看看参数为2个的情况:

    transform:skew(45deg,45deg);

    此时元素将不可见,但实际上它应当在我画的箭头处。

    其实根据步骤4和5可以发现,当Y轴倾斜45度后,元素有了一个45°的锐角,而此时又向X轴倾斜,于是这个锐角正好被压缩为0;于是形成了一个类似180°倍数的角。

    CSS3新增样式大解析:[7]skew之元素变形
  7. 通过修改X轴的倾斜度数为44度,可以发现元素还是会露出一部分的,跟我上面箭头画的位置存在疑点偏移。

    CSS3新增样式大解析:[7]skew之元素变形
  8. 8

    说明:目前skew无Z轴的倾斜,说不定以后会又该属性。