css3 skew变形

 css3的文档说明很清晰“skew(x-angle,y-angle)  定义沿着 X 和 Y 轴的 2D 倾斜目前这个并不支持Z方向的改变转换。” 但是感觉很难把握这个数值的控制 特别是和rotate配合的时候更加难想象

       相关例子：

             http://runjs.cn/code/qinciuns 可以通过调试代码来测试下面列举的例子

所以先贴下x方向和y方向被修改时候的图片，这样方便想象

1.skewX(45deg):

2.skewY(45deg):

3.skew(45deg,45deg):

然后我们看到同时设置45deg的时候图片不见了，如果靠想象真的很难想的明白，下面我们用1和2图片拼成一张来对比

4.假设div节点为一个宽100px 高100px的可拉伸的橡胶方块

    当角度值为正值得时候（负值的时候左右上下取反）：

    skewX：就是捏着方块的左上角和右下角------分别往左和右方向扯

                  方块“左边框”和底边造成的∠的补角就是skewX设置的值    --------以方块底边为∠底边

    skewY：就是捏着方块的左上角和右下角------分别往上和下方向扯    ---------以方块左边为∠底边

                 方块“底边框”和左边造成的∠的补角就是skewX设置的值

   当skewX为90的时候：

               方块会沿着左右【x轴】方向拉扯成一条线-------------------将无法看到div

  当skewY为90的时候：

                方块会沿着上下方向【X轴】拉扯成一条线------------------将无法看到div

 当skew（45deg,45deg)的时候:

               方块会被拉成一条斜线                           -------------------同样无法看到div

               但是这个和  transform: skewX(45deg) skewY(45deg)的效果又并不相同这个让我很奇怪