title: How to rotate a gradient rather than the whole div?
body: <p>I have this gradient on element, and am trying to rotate only the gradient, but when I try to rotate it, as you see in the snippet, the whole element is rotating.</p>
  
  <p>Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test {
    transform: rotate(180deg);
    color: #d3d3d3;
    background-color: #003366;
    background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
    height: 200px;
    width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="test"&gt;
    I'm gonna be some buttons and stuff
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>