是否可以使用HTML5创建垂直仪表？

Question

通常，如果我创建：

<meter value="30" max="100">Low</meter>

如果在支持html5仪表元素的浏览器上查看，我将以水平仪表/条形图结束。

是否可以使用html5创建垂直仪表？

到目前为止，我能够提出的唯一解决方案是使用CSS3旋转（变换）。

Answer 1

是的，变换是唯一的方法。

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Answer 2

变换就是答案。米的整个要点是它是一个语义，而不是一个表现元素，你应该能够使用CSS＆gt;

来设置它。

Answer 3

在仪表元素上使用变换有一个主要的缺点，我还没有找到一个优雅的方式，它似乎没有改变元素所需的水平宽度的数量。例如，对于宽度为180像素，高度为15像素，转换为270度的仪表，仪表将显示为高度为180像素，宽度为15像素的垂直条，但边界框最终为180x180，左侧有一个巨大的空白区域。然后需要进一步的CSS来重新定位元素，以便隐藏with gap。我在Chrome和Firefox上都观察到了这种行为。