title: How to use Javascript variables in CSS?
body: <p>Im trying to make an image spin when you click it. The more you click it the faster it spins, and if you stop clicking it will slow down over time.</p>
  
  <p>The problem is that the only way to spin an object without jQuery is with the "transform" property in CSS (What I know of at least). Is there any way to use JavaScript variables in CSS? Or is there another way to spin my image? Or will I need to use jQuery?</p>
  
  <p>Code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var spinner = document.getElementById("spinner");
  var speed = 0;
  var addSpeed = 10;
  var slowSpeed = 2;
  
  //Activates Slowdown
  window.onload = loop();
  
  //Speed up
  function spin() {
    if (speed &lt; 0) {
      speed = speed + 10;
      loop()
    } else {
    speed = speed + 10;
    }
  }
  
  spinner.addEventListener('click', spin);
  
  //Slowdown
  function loop() {
    setTimeout(
      function slow() {
        speed = speed - slowSpeed;
        document.getElementById("speed").innerHTML = speed;
        if (speed &gt; 0) {
          loop();
        }
      }, 1000)
  }
  
  //Selectors
  function wheel() {
    spinner.src = "http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png";
  }
  function spiral() {
    spinner.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Black_bold_spiral.svg/2000px-Black_bold_spiral.svg.png";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#spinner {
    width: 500px;
  }
  #spinner {
    transform: rotate("speed"deg);
  }
  /* The "speed" is the variable I want to use from the JavaScript */ </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="spinnerContainer"&gt;
        &lt;img id="spinner" src="http://pngimg.com/uploads/car_wheel/car_wheel_PNG23305.png"/&gt;
        &lt;h4 id="speed"&gt;N/A&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="selectors"&gt;
        &lt;ul&gt;
          &lt;button onclick="wheel()"&gt;Wheel&lt;/button&gt;
          &lt;button onclick="spiral()"&gt;Spiral&lt;/button&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;footer&gt;
  
      &lt;/footer&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  &lt;!-- END --&gt;</code></pre>
  </div>
  </div>
  </p>