title: Javascript add transform as an inline style
body: <p>I have a quick question: how can you add transforms as an inline style via JavaScript? For the last hour, I've been trying to solve this problem and also have been searching everywhere, but nothing worked. Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;ul id="slider"&gt;
      &lt;li class="slide"&gt;&lt;/li&gt;
      &lt;li class="slide"&gt;&lt;/li&gt;
      &lt;li class="slide"&gt;&lt;/li&gt;
      &lt;li class="slide"&gt;&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code> var windowWidth = $(window).width();
   var centerDistance = windowWidth / 2;
   var targets = $(".slide");
   var inlineTransform = '"' + "translateZ(" + centerDistance + "px)" + '"';
   for (var i = 0; i &lt; targets.length; i++) {
       targets[i].style.WebkitTransform = inlineTransform;
       targets[i].style.msTransform = inlineTransform;
       targets[i].style.transform = inlineTransform;
   }
  </code></pre>
  
  <p>According to w3schools, nothing is spelled wrong and all the prefixes are correct: <a href="https://www.w3schools.com/jsref/prop_style_transform.asp" rel="nofollow noreferrer">w3schools DOM style transform</a></p>
  
  <p>The syntax should be correct too. I don't get any error messages and this code works if I use other styles.</p>