JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<div class="wrapper">
    <div class="inner"></div>
</div>

CSS

.wrapper {
    background:red;
    width:350px;
    height:200px;
}

.inner {
    background:aqua;
    width:100px;
    height:100px;
    -webkit-transform:translate3d(100%,0,0);
}

JavaScript

var innerDiv = document.querySelector(".inner");
var wrapperCompWidth = parseFloat( window.getComputedStyle(document.querySelector(".wrapper"))["width"]);
var innerCompWidth = parseFloat(window.getComputedStyle(innerDiv)["width"]);

var translateX = 100;
var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";

innerDiv.style.webkitTransform = transform;
innerDiv.style.mozTransform = transform;
innerDiv.style.transform = transform;