让translateX使用视口宽度而不是那个元素。

Question

我正在使用CSS留下动画，我出于性能原因转移到了translateX。然后我偶然发现了以下内容：

两个div：

<div class="box box1">Using CSS left:20%;</div>
<div class="box box2">Using CSS transform: translateX(20%);</div>

和一些CSS：

.box {
    width:500px;
    background:red;
    height:50px;
    position: relative;
}

.box1 {
    left:20%;
}

.box2 {
    transform: translateX(20%);
}

产生这个：

事实证明，translateX使用元素宽度，而left使用视口/父元素宽度。

如何使translateX使用视口/父宽度？

http://jsfiddle.net/Vd2nK/

Answer 1

你可以这样做：

.box2 {
    transform: translateX(20vw);
}

，结合

body {
    margin: 0;
}

给出与left: 20%;相同的结果。请注意，vw单位（等于视口宽度的1/100）需要一个相当现代的浏览器。

这是一个固定的小提琴：http://jsfiddle.net/Vd2nK/6/