JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div id="container">
    <div id="box">
        Original position:<br>
        top: 100 left: 100
        <br><br>
        Position after translate should be:<br>
        top: 250 left: 250
    </div>
</div>

CSS

#box {
    position: absolute;
    top: 100px; 
    left: 100px;
    width: 200px;
    height: 200px;
    border: dotted 1px blue;
    font-family: Courier;
    font-size: 11px;
}
.translate150 {
    -webkit-transform: translate(150px, 150px);
    -moz-transform: translate(150px, 150px);
}
#container {
    position: relative;
    margin: 20px auto 0;
    width: 500px;
    height: 500px;
    border: dotted 1px #777;
}

JavaScript

// Different in F4
var $box = $('#box'),
    p = $box.position();

console.log('top: ', p.top, ' left: ', p.left);

console.log('Do translate...');
$box.addClass('translate150');

p = $box.position();
console.log('top: ', p.top, ' left: ', p.left);