使用CSS旋转标准HTML5滑块

我想在阅读CSS旋转属性参考指南后旋转标准滑块90度（pi/2），但到目前为止它仍保留在默认位置。该文档确实说明了它的一个块元素，所以我将该滑块包装在一个div中，但仍然没有成功。使用CSS旋转标准HTML5滑块

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;  
}

来源

2013-10-31 user1574598

注：根据HTML5 CR，第10.5，应该有可能使滑块垂直只需将'height'设置为大于'width'，但目前只适用于Opera。如果它获得更广泛的支持，它应该是一个比转换更好的方法。 –

这听起来像一个更简单的解决方案，当它完全支持 – user1574598

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%;

来源

2013-10-31 10:48:04 matewka

我看，谢谢，我刚刚实现了代码，即使我的滑块包装在一个段落中，滑块似乎与所有其他元素重叠。 – user1574598

@ user1574598，你能否提供一个例子（如[jsFiddle]（http://jsfiddle.net/））并解释什么是预期行为？ – matewka

我会尽力去做，只需要先了解如何使用它。 – user1574598

使用CSS旋转标准HTML5滑块

回答

相关问题