transform-origins y-offset position when using calc() - css

Question

In this demo below, I am using transform-origin like this:
transform-origin: 50% calc(100% + 6em);
The y-offset value is set at calc(100% + 6em), but what am I setting the value of the y-offset to? I can see that it is + 6em, but + 6em from where, exactly?
.container {
width: 400px;
height: 400px;
background: red;
margin: 0 auto;
cursor: pointer;
}
.me {
position: relative;
width: 200px;
height: 200px;
border: 2px solid #444;
background: pink;
margin: 20% auto;
transition: 2s;
transform: rotateZ(45deg);
transform-origin: 50% calc(100% + 6em);
cursor: pointer;
}
.container:hover .me {
transform: rotateZ(0deg);
}
<div class="container">
<div class="me"></div>
</div>

Answer 1

When the transform-origin is given two values, like in your example, it is setting the x-offset and the y-offset, using the "two-value syntax":
transform-origin: x-offset y-offset
The percentage value length is based on the element that the transform origin is set on.
The x-offset begins at the left of the element. 50% plots the x-offset position in the very middle of the element.
The y-offset begins at the top of the element. 100% + 6em plots the y-offset position at the bottom of the element plus an extra 6 em.
The x and y offset meet to form a single point, illustrated here where the two orange lines meet:
Offset position — live example
In this example, the position of the offset is shown with the two pseudo elements.
You can change the two values of the before and after pseudo elements at the bottom of the CSS to easily show where the offset point location is. Change the values as shown in the CSS comments to plot the point visually.
.container {
width: 400px;
height: 400px;
background: #000;
margin: 0 auto;
cursor: pointer;
position: relative;
margin-top: 100px;
}
.container:after {
content: '';
display: block;
height: 200px;
width: 200px;
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.5);
}
.me {
position: relative;
width: 200px;
height: 200px;
background: pink;
transition: 2s;
transform: rotateZ(45deg);
cursor: pointer;
}
.me:before {
content: '';
display: block;
height: 5px;
position: absolute;
margin-top: -5px;
left: 0;
background: #F90;
}
.me:after {
content: '';
display: block;
width: 5px;
position: absolute;
top: 0;
margin-left: -5px;
background: #F90;
}
.container:hover .me {
transform: rotateZ(0deg);
}
.me {
/* x-offset | y-offset */
transform-origin: 50% calc(100% + 6em);
}
.me:after {
height: calc(100% + 6em); /* Set to y-offset value */
left: 50%; /* Set to x-offset value */
}
.me:before {
width: 50%; /* Set to x-offset value */
top: calc(100% + 6em); /* Set to y-offset value */
}
<div class="container">
<div class="me"></div>
</div>