Вращение стандартного слайдера 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%;