title: Rotating a standard HTML5 slider using CSS
body: <p>I am trying to rotate a standard slider 90 deg (pi/2) after reading the CSS rotate property reference guide but so far it remains in its default position.  The documentation did state its for a block element so I wrapped the slider within a div but still no success.</p>
  
  <p>HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="sliders"&gt;
  
  &lt;form id="form" name="form1"&gt;
  &lt;p&gt;
  Slider 1
  &lt;input id="slider01" autocomplete="off" type="range" name="slider1" min="0" max="10" value="0"&gt;&lt;span id="value"&gt;0&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
  &lt;input type="button" value="Submit" id="submit" /&gt;
  &lt;/p&gt;
  &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre class="lang-css prettyprint-override"><code>#sliders {
  rotation-point: 50% 50%;
  rotation: 90deg;    
  }
  </code></pre>