<p class="zw"><code>skew</code>使元素在水平或者垂直方向上扭曲。语法很简单，为了演示，我们使用<code>skewX</code>来声明水平方向，然后在括号里设置角度，这里使用<code>30deg</code>。</p> <pre class="代码无行号"><code>.h-card { transform : skewX(30deg); }</code></pre> <p class="zw">现在我们组合使用两个轴，在垂直方向上使用<code>skewY</code>来倾斜<code>15deg</code>，组合效果如下所示。</p> <pre class="代码无行号"><code>.h-card { transform : skewX(30deg); transform : skewY(15deg); }</code></pre> <p class="zw">我们还可以简写<code>skew</code>属性，如下所示。</p> <pre class="代码无行号"><code>.h-card { transform : skew(30deg, 15deg); }</code></pre> <p class="zw">最好的学习方法就是在实践中观察它们，我们会在另一张名片上演示水平和垂直，以及正向和反向的扭曲效果，虚线框表示它的初始形状。</p> <p class="图"><img alt="1806.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/224.jpg"></p>
