transform-origin属性在不同文本大小上的工作方式不同

Question

我正在进行网页设计。在那里，我必须直截了当地指导文本。我通过变换旋转和设置原点来做到这一点。但是，每个方块侧面的文字在右侧的位置不同。如果文本字符或多或少，则变换原点属性的工作方式不同，并且正方形一侧的文本会进入远处或进入。我不知道发生了什么。这是fiddle。我不能在这里粘贴代码太复杂和冗长。

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

此处的transform-origin对于所有侧标题都不一致。 例如，侧标题header位于距离正方形很远的位置。

Answer 1

应该替换css

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

出于某种原因，h2的位置取决于其父级的width