如何实现元素的拉扯扭曲效果

在编程的过程中，我们往往需要通过代码来实现许多的效果，那么我们该如何通过代码来实现元素的拉扯扭曲效果呢，这又需要那些代码呢？
首先我们需要实现的元素拉扯扭曲销售是这样的，如下图

需要实现这个效果的关键代码是：transform:skewY(30deg);
这个transform:skew()代码能够让元素显示倾斜效果，它可以将一个元素以它的中心位置围绕着X轴和Y轴作出一个倾斜效果，这个transform:skew()与transform:rotate()的旋转不同，transform:rotate()只是单单的旋转，而不会改变元素的形状，skew()不会旋转，而只会改变元素的形状，这就是它们的区别。
transform:Skew()它具有三种情况：
第一种、transform:skewX这一种情况仅仅只能让元素在水平方向发生扭曲和变形，也就是说它的X轴发生扭曲和变形；
第二种、transform:skewY而这第二种情况呢，恰好和第一种相反，这种情况仅仅只能让元素在垂直方向发生扭曲和变形，也就是说它的Y轴发生扭曲和变形；
第三种、transform:skew(x,y)至于这第三种情况就有点与众不同，它是能让元素同时在水平方向和垂直方向一起发生扭曲和变形，也就是说它 X轴和Y轴同时发生扭曲和变形；第一个参数对应的是X轴的扭曲值，第二个参数对应的是Y轴的扭曲值。如果第二个参数没有被赋值，那么它的值为0，也就是Y轴方向上没有任何的扭曲效果。
下面是实现上图效果的代码：