JSFiddle - React, Tailwind, and code Playground

HTML

<div id="woot" contenteditable>Hello</div>

CSS

div
{
width:200px;
height:100px;
line-height:100px;
text-align:center;
background-color:yellow;
margin:50px;
}

JavaScript

var el = document.getElementById('woot');

var start = +new Date,
    duration = 3000,
    end = start + duration,
    scaleX_start = 1,
    scaleX_end = -1,
    rotate_start = 0,
    rotate_end = 180;

(function go() {
    var now = +new Date,
        foo = now > end ? 1 : (now - start) / duration;
    
    if(now >= end) {
        start = +new Date, 
        end = start + duration, 
        scaleX_end = 1,
        rotate_end = 360;
        setTimeout(go2, 10);
        return;
    }
    
    scaleX_start = (scaleX_start + (scaleX_end - scaleX_start) * ((-Math.cos(foo * Math.PI) / 2) + 0.5));
    rotate_start = (rotate_start + (rotate_end - rotate_start) * ((-Math.cos(foo * Math.PI) / 2) + 0.5));
    
    el.style['transform'] =
    el.style['-ms-transform'] =
    el.style['-moz-transform'] =
    el.style['-webkit-transform'] =
    'scaleX(' + scaleX_start + ') rotate(' + rotate_start + 'deg)';
    
    setTimeout(go, 10);
})();

function go2() {
    var now = +new Date,
        foo = now > end ? 1 : (now - start) / duration;
    if(now >= end) {
        return;
    }        
    scaleX_start = (scaleX_start + (scaleX_end - scaleX_start) * ((-Math.cos(foo * Math.PI) / 2) + 0.5));
    rotate_start = (rotate_start + (rotate_end - rotate_start) * ((-Math.cos(foo * Math.PI) / 2) + 0.5));
    
    el.style['transform'] =
    el.style['-ms-transform'] =
    el.style['-moz-transform'] =
    el.style['-webkit-transform'] = 
    'scaleX(' + scaleX_start + ') rotate(' + rotate_start + 'deg)';
    
    setTimeout(go2, 10);
}