绝对位置旋转元素到右角

Question

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

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

Answer 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 */
}

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的良好措施.

Answer 3

To rotate text at 90° using CSS, consider using writing-mode.

Set position: relative; on the parent div, then use something like this on the rotated element:

#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.

This way you don't have to think about the rotation origin.