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

How to rotate an element and correctly position it with CSS or jQuery

本文关键字：定位 元素 旋转 何使用 CSS jQuery      更新时间：2023-09-26

我正在维护一个遗留的Web Forms应用程序，该应用程序目前实际上只在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替换了上面的子表，该div带有文本，我已经用CSS将其塑造成梯形。然而，当我尝试使用CSS transform函数时，我可以旋转元素，但元素的宽度会打乱所有元素的间距。此外，当用户点击标签时，菜单面板应该折叠，标签和主内容面板应该向右滑动以占据空间。

我这里有一个jsfidde：http://jsfiddle.net/greyseal96/vb6bou17/1/这说明了我到目前为止所取得的成就以及我想去的地方。我试着对表格内页面的布局做一个非常粗略的复制。我有三个区域，我对它们进行了颜色编码，以便更容易地看到每个区域是什么。我试着把标签放在自己的div中，并用CSS转换函数旋转它，但元素的宽度会导致间距偏离。我试着让标签完全定位，然后用jQuery UI.position（）函数把标签定位在正确的位置，但当我调整页面大小或折叠菜单面板时，元素是绝对定位的，不会重新定位自身。

我已经尝试了很多东西，但我似乎无法做到这一点，所以我希望有人能帮助我找出如何将这个元素定位到我们需要的位置。

不太确定你想要实现什么，但似乎不需要做任何基于JS的定位。相反，将奇怪的梯形东西放在紫色间隔元素中：

<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/

最后，看看对开发人员决定的基于表的布局的报复：-）

相关文章：