Rotating a standard HTML5 slider using CSS

Question

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.

HTML:

<div id="sliders">

<form id="form" name="form1">
<p>
Slider 1
<input id="slider01" autocomplete="off" type="range" name="slider1" min="0" max="10" value="0"><span id="value">0</span>
</p>
<p>
<input type="button" value="Submit" id="submit" />
</p>
</form>

</div>

CSS:

#sliders {
rotation-point: 50% 50%;
rotation: 90deg;    
}

Answer 1

rotation property is not supported by any browser yet. Use transform instead. Remember to add browser specific prefixes

#sliders {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

To manage the rotation point you should use transform-origin

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;