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

Question

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

例如，如果我有：

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

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

在firefox开发者工具中，你可以看到绿色和蓝色的“框”，绿色的是参考位置，蓝色是对象的真实位置。

但引用一个既不在窗口的左上角也不在对象的父级。而且我确信我没有填充和边距等任何属性。

Answer 1

正确的语法是：

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

这里的工作示例：

https://jsfiddle.net/hhhotv8x/

左上角是位置（0,0） 定义转换基于容器的左上角位置。因此，定义是隐含的，在每种情况下，它都是“0,0”，因为它取决于容器。

Answer 2

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

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

transformation matrix：

  

定义从一个坐标系到另一个坐标系的数学映射的矩阵。它是根据描述below的变换和变换原点属性的值计算的。

根据w3.org：

  

变换矩阵是根据变换计算的   transform-origin属性如下：

     

  
• 从身份矩阵开始。
  
• 通过计算的X，Y和Z进行平移   transform-origin的值
  
• 乘以每个变换函数   在转换属性中从左到右
  
• 被否定的翻译   计算transform-origin
的X，Y和Z值   

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

这意味着它是从<div id="container">元素top left corner (0,0) of the bounding box的坐标系进行翻译。

  

<强> <length>

     

长度值给出固定长度作为偏移量。水平和垂直偏移的值表示距边界框左上角的偏移量。

因此，如果您为#container添加保证金，则<p>的排名会发生变化。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;