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

【问题标题】：transform-origin property working differently on different text sizestransform-origin 属性在不同的文本大小上的工作方式不同
【发布时间】：2018-02-22 10:51:03
【问题描述】：

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

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

此处的转换原点并非对所有侧标题都有效。例如，侧标题header 位于离正方形很远的位置。

【问题讨论】：

这是逻辑，因为如果你有更多的文字，宽度会有所不同......
如果代码太乱太长，那么你应该改为minimal reproducible example。

标签： html css

【解决方案1】：

应该替换css

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

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

【讨论】：