javascript - 用于旋转下拉菜单的 Jquery/Javascript

Question

我需要一个下拉菜单以逆时针旋转 90 度显示 - 这样下拉菜单中选择“按钮”的文本会垂直显示，然后选项同样会以旋转的、侧向的方式滑出，并带有垂直文本。 (上下文:用户需要从图表 Y 轴的多个选项中选择一个标题 - 下拉列表需要存在于标题最终到达的位置，同样旋转。)

html目前简单如下:

<select id="title"  >
<option value="title-0">Choose a chart title</option>
<option value="title-1">title 1</option>
<option value="title-2">title 2</option>
<option value="title-3">title 3</option>
</select>

我知道这有 CSS3 的东西。我已经提到: Need Jquery code for rotate a whole div所以我试过像这样或类似的 CSS:

.box_rotate {
-webkit-transform: rotate(90deg);  /* Saf3.1+, Chrome */
-moz-transform: rotate(90deg);  /* FF3.5+ */
-ms-transform: rotate(90deg);  /* IE9 */
-o-transform: rotate(90deg);  /* Opera 10.5 */
transform: rotate(90deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
}

发生的事情是 - 至少在 Firefox 15 中 - 选择“按钮”被旋转，但下拉选项，当菜单被激活时，保持在水平位置，否则 - (下 zipper 接不会工作)。

我已经尝试将旋转类分别应用于选项标签、选择标签或全封闭 div。这些似乎都无法解决问题。

显然，“有很多插件能够为 jQuery 添加旋转支持”。 (根据前面提到的 SO 问题)。我见过的那个似乎只适用于图像或简单的 div 元素——对整个下拉菜单没有任何实际作用。

有什么想法吗？ .. 首选 Javascript/jquery 解决方案。

谢谢

Answer 1

这是一个浏览器错误:https://bugzilla.mozilla.org/show_bug.cgi?id=455164