Css 将元素旋转到右角的绝对位置

我想知道如何使购物车标签，将定位在右角，也旋转90度。旋转很自然地混合了位置，但可能有一个解决方法，即包装不同的包装等

如果不需要定义宽度，则需要额外的点。我不在乎较旧的浏览器

如何使用？看

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

非常好，为我指出了正确的方向，但我意识到，您可以实现相同的效果，而无需显式设置要移动的元素的高度、线条高度和位置-相反，只需设置

translate（0，-100%）

：

正文{
保证金：0；
}
#盒子{
位置：相对位置；
}
.bg{
右：0；
填充：1em；
变换：旋转（-90度）平移（0，-100%）；
变换原点：100%0；
位置：绝对位置；
背景：#FF1493；
}

他不是救世主。他是一个非常淘气的男孩。
< /代码> 使用CSS在90°旋转文本，考虑使用.< /P>
设置
位置：相对，然后在旋转的元素上使用类似以下内容：

#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°角

这样，您就不必考虑旋转原点。
如果需要定位包装器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;
    }

太棒了，哇，我从来没有意识到这一点。我要试一试。非常感谢。谢谢你的建议！在不同的浏览器中是否有对
tranform origin
支持的权威描述？目前，它还很不完整。据我所知，每个支持转换的浏览器都支持它。这是转换的-90deg，对于90deg来说效果不太好。如果你想反过来阅读文本，只需添加.txt{transform:rotate（180deg）；}你的代码段和小提琴中有一个输入错误，顺便说一句-它应该是类，而不是clssI使用它来扭转：transform:rotate（90deg）translate（100%，0）；变换原点：100%0；非常感谢。这是IMO最清晰的答案。请注意，截至2018年11月，书写模式垂直rl未得到广泛支持：