CSS3 变换是否转换相对于其宽度 and/or 高度的百分比值？

Question

我认为当我们使用百分比值进行 CSS3 转换转换时，该百分比是相对于 它自己的 宽度或高度的，所以(50%, 75%) 表示它自己宽度的 50%，它自己高度的 75%，但我找不到任何这样说明的规格。

transform: translate(100%, 100%)

我查看了 http://www.w3.org/TR/css3-transforms 但找不到那里提到的 -- 我只能找到 transform-origin、"percentages: refer to the size of bounding box" 之类的，我认为边界框可能是具有元素宽度和高度的矩形。（不包括任何边框）...但是除了 SVG 和 table 之外，我找不到边界框的定义。

Answer 1

是的，你是对的。 Transform translate 将元素移动一定数量的像素（如果使用 px）或移动元素大小的百分比（如果使用 %）。

所以如果你有一个 div class='mover' 这个 css 会在 x 和 y 轴上移动 div 250px。

.mover {width: 100px;
height: 100px;
-webkit-transform: translate(250%, 250%);
background: #000;}

这里有一个简单的jsfiddle示例。

Answer 2

在本节中 http://www.w3.org/TR/css3-transforms/#transform-property 指出：

Percentages: refer to the size of bounding box

边界框定义为(source)

A bounding box is the object bounding box for all SVG elements without an associated CSS layout box and the border box for all other elements. The bounding box of a table is the border box of its table wrapper box, not its table box.

而边框是 (source)

The width and height properties include the padding and border, but not the margin. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} lead to a box rendered in the browser of width: 350px.

希望对您有所帮助

Answer 3

在chrome中（在v59中测试），百分比是根据bounding box加上border的尺寸计算的。

如果一个元素的宽度为 200px，边框为 50px，我们应用类似 transform: translate(100%, 0) 的总平移距离为 200px + 50*2 = 400px。

在这种情况下，如果您希望平移距离为 100px，您可以随时添加一个 box-sizing:border-box

section {
  width:400px;
  height:400px;
  background: #f0ad4e;
}

span {
  display:block;
  background:red;
  width:200px;
  height:200px;
  border:100px solid black;
  transform: translate(100%, 0);
}

<section>
  <span class="center">hello world</span>
</section>

示例： https://jsfiddle.net/httcg329/1/

CSS3 变换是否转换相对于其宽度 and/or 高度的百分比值？

Is the CSS3 transform translate percentage values relative to its width and/or height?

css

css-transforms