获取translateX值时使用视口宽度而不是元素宽度

Question

我是一名有用的助手，可以帮助您翻译文本。

我曾经使用CSS left进行动画，但为了提高性能，我正在更换为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/

- wesbos

Answer 1

你可以这样做：

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

which, combined with

body {
    margin: 0;
}

这与 left: 20%; 的结果相同。但是需要注意的是，vw 单位（等于视口宽度的1/100）需要比较现代的浏览器支持。

这里有一个修复后的示例链接：http://jsfiddle.net/Vd2nK/6/

- silverwind