transform-origin属性对不同的文本大小有不同的作用

Question

我正在从事网页设计。 在那里，我必须将文本直立放置。 我通过变换旋转和设置原点来实现。 但是，每个正方形侧面的文字在右侧的位置特别不同。 如果文本字符或多或少有一些变化，则transform origin属性的工作方式有所不同，并且正方形侧面的文本变远了或进入了。我不知道发生了什么。 这是小提琴 。 我不能在这里粘贴太长且冗长的代码。

.right-vertical-text{
  transform: rotate(90deg);
  transform-origin: 65px 85px;
  margin:15px;
  right: 0px;
}

此处的transform-origin不适用于所有侧面标头。 例如，侧面标header标header的位置离正方形很远。

Answer 1

应该更换css

.right-vertical-text {
    transform: rotate(90deg);
    transform-origin: 65px 85px;
    margin: 15px;
    right: 0px;
    width: 135px; /*Added*/
}

由于某些原因， h2的位置取决于其父级的width