Вращение стандартного слайдера HTML5 с использованием CSS

Question

Я пытаюсь повернуть стандартный слайдер 90 град (pi/2) после чтения справочного руководства по свойствам CSS, но до сих пор он остается в своем положении по умолчанию. В документации было указано ее для элемента блока, поэтому я завернул слайдер в div, но все равно не успел.

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 свойство не поддерживается любым браузером еще. Вместо этого используйте transform. Не забудьте добавить броузер определенных префиксов

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

Для управления точкой поворота вы должны использовать 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%;