CSS 绝对位置将元素旋转到右角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11972286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
absolute position rotated element to right corner
提问by client
Im trying to figure out how to make shopping cart tab that would be positioned on the right corner and also rotated 90 degrees. The rotation naturally mixes the position but maybe there's a workaround of wrapping to different wrappers etc....
我试图弄清楚如何制作将位于右上角并旋转 90 度的购物车标签。旋转自然地混合了位置，但也许有一种包装到不同包装器等的解决方法......
Extra points if there wouldn't need to define width. I don't care about older browsers
如果不需要定义宽度，则额外加分。我不在乎旧浏览器
回答by Ana
How about using transform-origin? See DEMO.
怎么用transform-origin？见演示。
Relevant CSS:
相关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 */
}
回答by indextwo
Ana's answeris excellent and pointed me in the right direction, but I realised you could achieve the same effect without having to explicitly set the height, line-height and position for the element you want to move - instead, just set translate(0, -100%):
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>...and a jsFiddlefor good measure.
...和一个jsFiddle很好的衡量标准。
回答by Fabien Snauwaert
To rotate text at 90° using CSS, consider using writing-mode.
要使用 CSS 将文本旋转 90°，请考虑使用writing-mode.
Set position: relative;on the parent div, then use something like this on the rotated element:
position: relative;在父 div 上设置，然后在旋转的元素上使用类似的东西：
#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;
}
You'll end up with a div stacked on the side of your parent div, with the text at a 90° angle.
您最终会在父 div 的一侧堆叠一个 div，文本呈 90° 角。
This way you don't have to think about the rotation origin.
这样您就不必考虑旋转原点。
回答by Toki
If you need to position wrapper div.and rotate child div so that its always centered vertically and horizontally, try something like this!
如果您需要定位包装器 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;
}
