如何旋转元素并使用CSS或jQuery正确定位

Question

我正在维护一个旧的Web窗体应用程序，该应用程序当前仅在IE兼容模式下运行。 我们正在努力对其进行修复/更新，以使其可以在IE 11中运行，而不必使用兼容模式（以及其他“现代”浏览器）。 我们在页面的右侧有一个“导航”菜单面板，其中有一种“标签”类型的元素（ 不是html标签，我称其为标签是因为我想不到现在，对其进行了更好的说明 ），文字旋转了-90（或270）度。 以前，它具有IE特定的CSS，如下所示：

{ 
  writing-mode: tb-rl;
  filter: flipv fliph;
}

这会导致标签的文本从上到下旋转，然后翻转，以便从下到上，从左到右读取。 最终，该布局在当时的布局上效果很好，但是IE 11和其他现代浏览器无法识别CSS，最终呈现为从左到右的文本，而不是从下到上旋转。 这是ASCII艺术外观的粗略表示：

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x ======================  / =====x
x |     Main           |  | | M |x
x |    Content         |  | | E |x
x |     Panel          |  | | N |x
x ======================  \ | U |x
x                           |   |x
x                           | P |x
x                           | A |x
x                           | N |x
x                           | E |x
x                           | L |x
x                           =====x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

导航菜单面板的标签是菜单面板左侧的梯形外观。

该页面最初是使用表格编写的。 尽管我希望能够完全现代化并更正布局以不使用表格，但我们实际上没有时间完全修改布局。 页面上的所有内容都在一个大的包含表中。 然后，在<tr> ，以上每个元素都在其自己的<td>元素中：主内容面板，梯形标签和菜单面板。 在梯形的<td> ，还有另一个带有三个<tr>的表：一个在顶部为一个三角形，一个在文本上，一个在底部为三角形：

<table width="100%">
    <tbody>
        <tr>
            <td valign="center" width="100%" class="topTriangle">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td height="20" valign="middle" class="navLabel">
                <img src="~/navArrow.gif"/>
                <span>Navigation Label &raquo;</span>
            </td>
        </tr>
        <tr>
            <td valign="center" width="100%" class="bottomTriangle">
                &nbsp;
            </td>
        </tr>  
    </tbody>
</table>

我不是html / css专家，而我遇到麻烦的部分是使该标签中的文本以正确的方式旋转而不使用自定义IE CSS。 我已经用div替换了上面的子表，并用CSS将其成形为梯形。 但是，当我尝试使用CSS transform功能时，我可以旋转元素，但是元素的宽度弄乱了所有元素的间距。 另外，当用户单击标签时，菜单面板应该会折叠，并且标签和主内容面板应向右滑动以占据空间。

我在这里有一个jsfidde： http ： //jsfiddle.net/greyseal96/vb6bou17/1/ ，它说明了到目前为止的知识以及我想去的地方。 我尝试对表中页面的布局进行非常粗略的复制。 我已经对三个区域进行了颜色编码，以便于查看每个区域的内容。 我尝试过在自己的div中放置标签，并使用CSS变换功能对其进行旋转，但是元素的宽度导致间距不正确。 我尝试将标签放置在绝对位置，然后使用jQuery UI .position（）函数将标签放置在正确的位置，但是当我调整页面大小或折叠菜单面板时，该元素是绝对放置的，不会自行重新放置。

我已经尝试了很多事情，但是似乎似乎无法做到这一点，所以我希望有人可以帮助我弄清楚如何按照我们需要的方式来定位此元素。

Answer 1

不确定要实现的目标，但似乎不需要进行任何基于JS的定位。 而是将奇怪的梯形物体放在紫色的spacer元素内：

<div id="Spacer" class="spacer">
  <div id="NavPanel" class="container">
    <span>Some text</span>
  </div>
</div>

并在#NavPanel中旋转跨度。 像这样：

div#NavPanel > span {
  transform: rotate(270deg);
  transform-origin: left bottom 0;
  display: inline-block;
  width: 120px;
  position: absolute;
  bottom: 0;
}

http://jsfiddle.net/vb6bou17/4/

最后，去看看报仇者，无论哪个开发人员决定基于表的布局:-)