Get translateX to use viewport width, not element c.

Question

I used CSS for animation, and I am switching to translateX for performance reasons. Then I came across the following:

Two divs:

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

and some CSS:

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

.box1 {
    left:20%;
}

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

Produces the following:

It turns out that it translateXuses the width of the element, and is leftused with the width of the viewport / parent element.

How to force translateX to use viewport / parent width?

http://jsfiddle.net/Vd2nK/

Answer 1

You can do:

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

which combined with

body {
    margin: 0;
}

, left: 20%;. , vw ( 1/100- ) .

: http://jsfiddle.net/Vd2nK/6/