Question

这就是我想要完成的事情：

我希望导航旋转90度并固定在窗口的左上角。

HTML：

<div class="outer">
    <div class="inner">
        <ul class="list">
            <li class="item">lasange</li>
            <li class="item">spaghetti</li>
        </ul>
    </div>
</div>

CSS：

.outer {
    position: fixed;
    left: 20px;
    top: 20px;
    background: red;
}

.inner {
    -webkit-transform: rotate(-90deg);
    transform-origin: 0 0;
    background: green;
}

我无法在上图中看到它。问题在于轮换。内部div被定位然后旋转，结果最终在外部div之外。无论我把它作为转变的起源，它都不会像我想要的那样发挥作用。我尝试用position: absolute定位内部div，但没有运气。我不知道菜单列表的高度/宽度参数。

这是一个小提琴：https://jsfiddle.net/949cjcnq/7/

非常感谢任何帮助。

祝你好运，保罗

Answer 1

因此，无论您的。 -div使用position: absolute;的内容有多大，我都能按照您想要的方式定位。

~~唯一的缺点是你的文字朝下，不向上。我的CSS无法解决这个问题：S~~

如果您-webkit-transform: rotate(180deg); .inner的孩子，您可以正确地翻开文字：）

.outer {
  position: fixed;
  left: 20px;
  top: 20px;
  background: red;
}

.inner {
  position: absolute;
  bottom: 100%;
  -webkit-transform: rotateZ(90deg);
  transform-origin: 0 100%;
  background: #AACAD7;
  white-space: nowrap;;
}
.rotate {
  -webkit-transform: rotate(180deg);
}
ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }
ul li { padding: 5px 10px; }

<div class="outer">
  <div class="inner">
    <ul class="list rotate">
      <li class="item">lasange | spaghetti</li>
    </ul>
  </div>
</div>

Answer 2

我认为你想要做的是将旋转从内部移动到外部类。你的CSS应该是这样的：

.outer {
    -webkit-transform: rotate(-90deg);
    position: fixed;
    left: 20px;
    top: 80px;
    background: red;
}

.inner {
    background: green;
}

要使文本在旋转后并排显示，使用表格会比使用列表更好：

<div class="outer">
    <div class="inner">
        <table class="list">
            <tr>
                <td class="item">lasange</td>
                <td class="item"> | </td>
                <td class="item">spaghetti</td>
            <tr>
        </table>
    </div>
</div>

工作小提琴：https://jsfiddle.net/949cjcnq/12/

Answer 3

尽管您选择了角度或旋转，但遗憾的是，如果不知道项目的宽度，就无法做到这一点，因此我不认为如果没有扩展框架，它可以在纯CSS / CSS3中完成。因此，要解决此问题，您需要使用一些JavaScript并获取元素的计算宽度并适当地更改转换：

var inner = document.querySelectorAll('.inner')[0];
var width = inner.offsetWidth;
inner.style.transform = "translateY("+width+"px) rotate(-90deg)";

保留transform-origin: 0 0，因为它会将元素的顶部放到屏幕边缘。然后我们只需要沿Y方向平移宽度，这将把元素放在左角：

Fiddle Example

Answer 4

在下面的代码段中，您会看到我删除了outer和inner html，并且只是旋转了整个UL -90deg。结果是您的示例图像。更合适的造型取决于您; - ）

请参阅代码段以获取评论：

＆＃13;

/* {outline: 1px dotted red } /* for debugging */

ul, li { list-style-type: none; padding: 0; margin: 0 }

ul { height: 1; /* 1 x line-height */
    position: relative;
    float: left;
    padding: 0 6px;

    /* would be regular without transform */
    top: 20px; left: 20px;

    /* but transform-origin now pivots around
    top-right so UL element gets moved right.
    So left position needs correction:
    left = -1 x (total width of LI's + line-height + UL margin-LR + UL padding-LR) + wanted-left-margin */
    top: 20px; left: -134px; /* (optically estimated) */  
}

li {
    display: inline; /* result is horizontal menu */
}

.list {
    transform: rotate(-90deg); /* removed -webkit-*/
    transform-origin: top right;
    background: #acc9d7;
}

＆＃13;

<ul class="list">
    <li class="item">lasange | </li>
    <li class="item">spaghetti</li>
</ul>

＆＃13;

Answer 5

您可以将translateX（-100％）添加到转换中，然后将其设置为您想要的位置

＆＃13;

.outer {
    position: fixed;
    left: 20px;
    top: 20px;
    background: red;
}

.inner {
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    background: green;
}

.list {
  margin-top: 0px;
}

＆＃13;

<div class="outer">
    <div class="inner">
        <ul class="list">
            <li class="item">lasange</li>
            <li class="item">spaghetti</li>
        </ul>
    </div>
</div>

＆＃13;

将div旋转90度并将位置固定在左上角

5 个答案: