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

Question

I am working on a webpage design. There I have to direct the text upright. I am doing it via transform rotate and setting the origin. However, the text on the side of each square positions differently specially on the right side. if the text characters are more or less the transform origin property works differently and the text on the side of the square goes to far or goes in. I have no idea what is going on. This is the fiddle . I can't paste the code here that would be too messy and lengthy here.

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

the transform-origin here does not work consistently for all the side headers. for example the side header header is positioned very far from the square.

Answer 1

Should replace the css

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

For some reason the position of h2 is depends upon the width of its parent