绝对定位旋转元素到右上角

Question

我正在尝试找出如何制作购物车选项卡，该选项卡将位于右上角并且旋转90度。旋转自然会混淆位置，但也许有通过包装到不同的容器中等绕过的方法......

如果不需要定义宽度则额外加分。我不关心旧浏览器。

- client

Answer 1

可以使用transform-origin，看看演示。

相关 CSS：

#box {
    position: relative;
}
.bg {
    right: 40px; /* same as height */
    height: 40px;
    transform: rotate(-90deg);
    transform-origin: 100% 0;
    position: absolute;
    line-height: 40px; /* same as height, for vertical centering */
}

- Ana

---

太棒了，我从来没有想到过。我会试一试。谢谢！ - client

谢谢您提供这个好建议！不知道有没有权威的描述来说明不同浏览器对于tranform-origin的支持情况？目前MDN文章还比较不完整。 - bfncs

据我所知，只要浏览器支持transforms，就可以支持该功能。http://caniuse.com/#feat=transforms2d - Ana

这是旋转了-90度，对于90度效果不太好。 - Alex

Answer 2

Ana的回答非常好，指引了我正确的方向，但是我意识到可以通过设置translate(0, -100%)来实现相同的效果，而无需显式设置元素的高度、行高和位置：

body {
  margin: 0;
}

#box {
  position: relative;
}

.bg {
 right: 0;
 padding: 1em;
 transform: rotate(-90deg) translate(0, -100%);
 transform-origin: 100% 0;
 position: absolute;
 background: #FF1493;
}

<div id="box">
 <div class="bg">        
  <div class="txt">He's not the Messiah. He's a very naughty boy.</div>
 </div>
</div>

...并加上一个jsFiddle进行辅助说明。

- indextwo

---

如果您想将文本倒过来读，只需添加 .txt { transform: rotate(180deg); }。 - mtness

你的代码片段和fiddle中有一个错别字，应该是class而不是clss。 - mtness

我使用以下代码来实现旋转和平移效果： transform: rotate(90deg) translate(100%,0); transform-origin: 100% 0; - user1383029

Answer 3

使用CSS将文本旋转90°，可以考虑使用writing-mode。在父div上设置position: relative;，然后在旋转的元素上使用类似以下的内容：

#rot {
    position: absolute; /* only handy here because its parent is set to `position: relative;` */
    left: 0;
    top: 0px;
    /* writing-mode: sideways-lr;   /* Webkit browsers don't support `sideways-lr` yet */
    writing-mode: vertical-rl;  /* `vertical-rl` and a rotation will achieve the same effect */
    transform: scaleX(-1) scaleY(-1);
    height: 100%;

    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 2.85;
    color: white;
    font-weight: bold;
}

你最终会得到一个与父div并排的div，文本呈90度角。这样，你就不必考虑旋转的起点。

- Fabien Snauwaert

---

谢谢！在我看来，这是最干净的答案。 - Fabian

请注意，截至2018年11月，writing-mode vertical-rl并不被广泛支持：https://developer.mozilla.org/zh-CN/docs/Web/CSS/writing-mode#Browser_compatibility - Eirik H

Answer 4

如果您需要定位包装 div 并旋转子 div，使其始终垂直和水平居中，请尝试类似以下的代码！

.togglewrap{
position:relative;
float:left;left:20%;top:0;
width:30px; 
height:120px;
background-color: #ffde21;
}
.sbartoggle {
    background:#f5f5f5;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:100%; 
    height:30px;/*equal to parent width*/
    line-height:30px;/*center text*/
    transform: rotate(-90deg);
    background-size:10px 10px;
    }

- Toki