Summary: The transformed element is positioned at the top left corner of the parent element, including margin.
This positioning is determined by a transformation matrix:
The transformation matrix defines the mapping from one coordinate system to another based on the values of the transform and transform-origin properties.
In accordance with w3.org guidelines:
The transformation matrix calculation involves:
- Beginning with the identity matrix
- Translating by computed X, Y, and Z values of transform-origin
- Multiplying by each transform function in transform property sequentially
- Translating by negated computed X, Y, and Z values of transform-origin
In this scenario, using translate means that the transform-origin does not impact the transformed element's position.
This implies that the element is moved from the coordinate system of the <div id="container">, which is the top left corner (0,0) of the bounding box.
<length>
A length value provides a fixed offset from the top left corner of the bounding box for horizontal and vertical positions.
https://i.sstatic.net/8bip6.png
If margin is added to the #container, it will change the position of the <p>.
#container {
margin: 20px;
}
p {
transform:translate(100px,100px);
}
<div id="container">
<p> Try! </p>
</div>