title: Difference between skew() and skewX() skewY()
body: <p>While creating some transformations for some objects in my website I found the following.If an object is given the transformation property <code>skew(20deg,45deg)</code> will be different than an other object with <code>skewX(20deg)</code> and <code>skewY(45deg)</code>.</p>
  
  <p>Can someone explain me why is this happening?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.skew {
    height:10em;
    width:10em;
    background:red;
    margin:auto;
  }
  
  #first {
    transform:skew(20deg,45deg);
  }
  
  #second {
    transform:skewX(20deg) skewY(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="skew" id="first"&gt; skew(20deg,45deg) &lt;/div&gt; &lt;hr&gt;
  &lt;div class="skew" id="second"&gt; skewX(20deg) skewY(45deg) &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update:</strong> skew has short syntax. How can I achieve the same effect I have with <code>skewX()</code> and <code>skewY()</code> by using <code>skew()</code> short syntax.</p>