css - 使用 CSS 旋转标准 HTML5 slider

Question

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