CSS翻译功能的参考是什么？

Question

我想知道css翻译功能的参考位置是什么

例如，如果我有一个：

p {
    transform:translate(100px,100px);
}

<div id="container">
  <p> Try! </p>
</div>

在firefox developer tool中，可以看到一绿一蓝"box"，绿色的是参考位置，蓝色的是物体的真实位置。

但参考对象既不在 window 的左上角，也不在对象的父对象的左上角。而且我确信我没有任何属性之类的填充和边距。

Answer 1

正确的语法是：

p {
   transform: translate(100px, 100px);
}

这里的工作示例：

https://jsfiddle.net/hhhotv8x/

左上角是位置(0, 0) 定义翻译是基于容器的左上角位置。因此，定义是隐式的，在每种情况下，它都是“0,0”，因为它取决于容器。

Answer 2

translate 变换函数将它应用到的元素从它通常在页面上占据的 space 偏移，第一个值表示水平偏移量，第二个值表示垂直偏移量.考虑以下元素组，其中 translate 已应用于第三个元素，将其向左 10px 向下移动 5px:

body{
  color:#fff;
  font-family:sans-serif;
  font-size:0;
  text-align:center;
}
p{
  background:#000;
  display:inline-block;
  font-size:14px;
  margin:0;
  padding:5px;
}
p:nth-of-type(3){
  background:#090;
  transform:translate(10px,5px);
}

<p>Some text</p>
<p>A little more text</p>
<p>This text is transformed</p>
<p>This paragraph isn't</p>
<p>Nor is this last one</p>

Answer 3

TL;DR：父元素的左上角（包括外边距）

是transformation matrix:

A matrix that defines the mathematical mapping from one coordinate system into another. It is computed from the values of the transform and transform-origin properties as described below.

根据w3.org：

The transformation matrix is computed from the transform and transform-origin properties as follows:

Start with the identity matrix.

Translate by the computed X, Y and Z values of transform-origin

Multiply by each of the transform functions in transform property from left to right

Translate by the negated computed X, Y and Z values of transform-origin

在这种情况下，您使用的是 translate，因此 transform-origin 不会影响转换元素的位置。

这意味着它是从 坐标系 的 <div id="container"> 元素（即 top left corner (0,0) of the bounding box.

）翻译过来的

<length>

A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.

因此，如果您向 #container 添加边距，<p> 的位置将会改变。

#container {
    margin: 20px;
}
p {
    transform:translate(100px,100px);
}

<div id="container">
  <p> Try! </p>
</div>

CSS翻译功能的参考是什么？

What's the reference for CSS translation function?

css

css-transforms