Trying to understand the relationship between these CSS transforms - html

Question

I have the following CSS transforms and I am trying to understand the relationship between them so I can figure out how to compensate for one of them.
Here is my code:
.background {
height: 720px;
position: absolute;
width: 1280px;
background-color: rgb(205, 163, 163);
}
.text {
transform: matrix(0, 1, -1, 0, 700, 206.66071428571);
width: 306px;
position: absolute;
height: 120px;
font-size: 120px;
color: rgb(255, 0, 0);
}
.top-left {
transform-origin: top left;
}
.center-center {
transform-origin: center center 0px;
}
<div>
<div class="background"></div>
<div class="top-left text">
<p>TEXT</p>
</div>
<div class="center-center text">
<p>TEXT</p>
</div>
</div>
transforms-origin: center center;
and
transform-origin: top left;
Are the CSS properties in question.
You will see two pieces of text, both with the same properties, except for their transform-origin.
I am trying to understand why the text with the "center center" origin is being placed where it is. I would assume the central point of its "bounding box" would be at the same spot of the top left corner of the bounding box of the other piece of text?
I am looking to figure out the relationship between the two so I can potentially shift the text with the "center center" origin to be in place of the other text.

Answer 1

To make it easier to understand, I have changed your matrix for an aproximate composite transform. You have a translate and a rotate 90 deg. And I have reduced the translate amount so that it fits more easily in the snippet. But the math remains unchanged.
Now notice that the center of transforms (wait for the animation to take place) are not where you might expect, the divs are not in the same place than the ps. I have added a border to the div so that it is easier to see.
About the translation involved, you are rotating around the center of the div. or around the top left corner. The distance between those points is half the width of the div, and half the height:
153px 60px
Now, when you rotate that 90deg, the equivalent translation is the sum and the rest of those values:
213px 93px
Hover on the snippet to see those values applied, and the 2 ps aligned
.background {
height: 99%;
position: absolute;
width: 100%;
background-color: rgb(205, 163, 163);
}
.text {
transform: translate(300px, 100px) rotate(90deg);
width: 306px;
position: absolute;
height: 120px;
font-size: 120px;
color: rgb(255, 0, 0);
border: solid 1px black;
animation: show 4s infinite;
}
.top-left {
transform-origin: top left;
}
.center-center {
transform-origin: center center 0px;
}
#keyframes show {
0% { transform: translate(300px, 100px) rotate(90deg);}
5% { transform: translate(300px, 100px) rotate(90deg);}
100% { transform: translate(300px, 100px) rotate(0deg);}
}
body:hover .text {
animation: none;
}
body:hover .center-center p {
transform: translate(93px, 213px);
}
p {transition: 1s; }
<div>
<div class="background"></div>
<div class="top-left text">
<p>TEXT</p>
</div>
<div class="center-center text">
<p>TEXT</p>
</div>
</div>
To understand that in the general case. Changing the transform origin is equivalent, in a mathematical sense, to do a translate (from one origin to the other), apply the transform, and do the inverse of the translate.
This translate, since you are moving from center center to top left, is half the width, half the height.
when you apply to this value the matrix, the uniform terms are negligible, and you end with x2 = x1 * a00 + y1 * a01 and y2 = x1 * a10 + y1 * a11.
The final movement is that last calculus minus the first translate. Just check that my original answer is the special case for the matrix provided in your question

Answer 2

The transform-origin property allows you to change the position of transformed elements.
2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
to better understnad. Here is the live demo from W3schools.com :http://www.w3schools.com/cssref/trycss3_transform-origin_inuse.htm
Example CSS with browser prefixes.
CSS
div {
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}