Html 容器内的定心旋转div

我试图制作一个

90deg

pricetag，但是我不确定为什么它没有达到我想要的效果，我希望标签与顶部和右侧（顶部：0和右侧：0）匹配

它没有那样做， 代码

<div class='box'>
  <div class='price-tag'>
    $23.12
  </div>
</div>
.box{
  margin:10em;
  height:100px;
  width:100px;
  position:relative;
  background:red;
}

.box .price-tag{
  background:yellow;
  position:absolute;
  top:0;
  right:0;
  display:inline-block;
  transform:rotate(90deg) translate(50%, 0%);
}

$23.12
.盒子{
边缘：10em；
高度：100px；
宽度：100px；
位置：相对位置；
背景：红色；
}
.盒子.价格标签{
背景：黄色；
位置：绝对位置；
排名：0；
右：0；
显示：内联块；
变换：旋转（90度）平移（50%，0%）；
}

---

将任何元件旋转90度时，您要寻找的是：

变换：旋转（90度）平移（计算（50%-（高度/2）），计算（50%-（宽度/2）））

或更具体到这种情况：

变换：旋转（90度）平移（计算（50%-（18px/2）），计算（50%-（44px/2））

这是因为当您旋转它时，您需要在水平轴和垂直轴上关闭

translate

，使其回到原来的位置。但是，这仅将角定位到上一个位置

要更正此问题，还需要使用功能，从新的水平偏移中减去

高度的一半，从新的垂直偏移中减去
宽度的一半

这可以从以下几个方面看出：


.box{
/*边距：10em；*/*--为演示小提琴而删除*/
高度：100px；
宽度：100px；
位置：相对位置；
背景：红色；
}
.盒子.价格标签{
背景：黄色；
位置：绝对位置；
排名：0；
右：0；
显示：内联块；
变换：旋转（90度）平移（计算（50%-（18px/2）），计算（50%-（44px/2）））
}

$23.12
问题在于您的
变换原点
，您需要将其设置为
右上方


.box{
边缘：10em；
高度：100px；
宽度：100px；
位置：相对位置；
背景：红色；
}
.盒子.价格标签{
背景：黄色；
位置：绝对位置；
排名：0；
右：0；
显示：内联块；
变换原点：右上角；
变换：旋转（90度）translateX（100%）；
}

$23.12
另一种方法是通过调整


.box{
高度：100px；
宽度：100px；
位置：相对位置；
背景：红色；
}
.盒子.价格标签{
背景：黄色；
位置：绝对位置；
排名：0；
右：0；
写入模式：垂直rl；/*tb rl（如果需要旧浏览器支持）*/
}

$23.12
它可能是变换的
原点
——因此它的旋转与您预期的略有不同？如果修改原点，然后稍微调整变换，它是否符合您的要求：？？