使用 CSS 旋转标准 HTML5 滑块

Question

在阅读 CSS 旋转属性参考指南后，我试图将标准滑块旋转 90 度 (pi/2)，但到目前为止它仍处于默认位置。文档确实说明了它是一个块元素，所以我将滑块包裹在一个 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%;