title: Using a JavaScript variable in a CSS transform
body: <p>Just starting out with JS so this is likely a newbie question. I am trying to figure out how to use a JS variable when using this line of code in my JS:</p>
  
  <pre><code>But3.style.webkitTransform = "translateX(JSVARIABLE)";
  </code></pre>
  
  <p>In my JS file I am running a function when a button is hovered over:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;div id= "But3" class="Button3"&gt; &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When this button is hovered over (mouseover), the function is run in my JS code here:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>But3.onmouseover = function(){
  
    var h = document.getElementById("But3").clientHeight;
    var w = document.getElementById("But3").clientWidth;
  
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
  
     /* This may be completely wrong*/
    var x = String(nh);
    var y = String (nw)
  
    /* This may also be completely wrong*/
    var nhf = x + "px";
    var nwf = y + "px";
  
    /* This works but I need it to work with nhf */
    But3.style.webkitTransform = "translateX(10px)";
  
  }
  </code></pre>
  
  <p>How can I make it so that I can use my value <code>nhf</code> and <code>nwf</code> as the values for my <code>translateX</code> transform? </p>
  
  <p><em>Note that I may be incorrectly formatting the values since I convert them to a string in order to include "px".</em></p>
  
  <p>Here is my <strong>CSS</strong> if this is needed:</p>
  
  <pre><code>.Button3{
  height: 20%;
    width: 17%;
    left: 30%;
    top: 20%;
    border-radius: 20%;
    background: #8585ad;
    margin: auto;
    position: relative;
    cursor: pointer;
    transition: 2s;
  }
  </code></pre>