绝对位置将元素旋转到右上角答案

【问题标题】：absolute position rotated element to right corner绝对位置将元素旋转到右上角
【发布时间】：2012-08-11 22:11:06
【问题描述】：

我试图弄清楚如何制作位于右上角并旋转 90 度的购物车标签。旋转自然地混合了位置，但也许有一种解决方法可以包装到不同的包装器等......

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

【问题讨论】：

【解决方案1】：

使用transform-origin怎么样？见DEMO。

相关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 */
}

【讨论】：

太棒了，我从来没有意识到这一点。我会试一试。谢谢！
感谢您的建议！不同浏览器对tranform-origin的支持是否有权威描述？ MDN article 目前还很不完整。
据我所知，每个支持转换的浏览器都支持它。 caniuse.com/#feat=transforms2d
这是-90度的变换，90度的效果不太好。

【解决方案2】：

Ana's answer 非常棒，为我指明了正确的方向，但我意识到您可以实现相同的效果，而无需为要移动的元素显式设置高度、行高和位置 - 相反，只需设置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 是很好的衡量标准。

【讨论】：

如果你想反向阅读文本，只需添加 .txt { transform: rotate(180deg); }
你的 sn-p 和 fiddle 中有错字，顺便说一句 - 它应该是 class，而不是 clss
我用这个来扭转局面：transform: rotate(90deg) translate(100%,0);变换原点：100% 0;

【解决方案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° 角。

这样你就不必考虑旋转原点了。

【讨论】：

谢谢！这是 IMO 最干净的答案。
请注意，截至 2018 年 11 月，写作模式 vertical-rl 尚未得到广泛支持：developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案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;
    }

【讨论】：