JSFiddle - React, Tailwind, and code Playground

by blasten

HTML

<div id="a">
<div id="b">
    Jumping text
</div>
</div>

CSS

#a{
    width:200px;
    height:200px;
    background:red;
    overflow:hidden;
    margin:100px;
}

#b{
    width:200px;
    height:200px;
    background:green;
    line-height:200px;
    text-align:center;
    font-size:30px;
}

JavaScript

var angle = 0;

(function() {
   angle = angle+1.005;

    // These operations don't quite cancel each other? 
    // The green element: Yes, any content inside the green element: No
    // It seems like the text is jumping 1 to 3 pixels in Chrome.
    // Chrome version: 21.0.1180.57 beta
    
    
var aElement = document.getElementById("a");
    aElement.style.webkitTransform = "rotateZ("+angle+"deg)";
    aElement.style.MozTransform = "rotateZ("+angle+"deg)";

var bElement = document.getElementById("b");
    bElement.style.webkitTransform = "rotateZ("+(-angle)+"deg)";
    bElement.style.MozTransform = "rotateZ("+(-angle)+"deg)";

    (window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        }
    )(arguments.callee);
    
})();