JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/zachstronaut/jquery-css-transform/master/jquery-css-transform.js"></script>
<script src="https://raw.github.com/zachstronaut/jquery-animate-css-rotate-scale/master/jquery-animate-css-rotate-scale.js"></script>
<body>
        <header>
            <nav>
                <ol>
                    <li>
                        <a href="#" id="nav-1">one</a>
                    </li>
                    <li>
                        <a href="#" id="nav-2">two</a>
                    </li>
                    <li>
                        <a href="#" id="nav-3">three</a>
                    </li>
                    <li>
                        <a href="#" id="nav-4">four</a>
                    </li>
                </ol>
            </nav>
        </header>
        <div id="main">
            <div id="div-1">one</div>
            <div id="div-2">two</div>
            <div id="div-3">three</div>
            <div id="div-4">four</div>
        </div>
    </body>

CSS

html,body{margin:0;padding:0;overflow:hidden}
header{position:fixed;bottom:0;left:0;background-color:#555;z-index:2}
header ol{list-style: none}
header ol li{float:left; padding: 20px;}
div#main{position:absolute;top:0;left:0;z-index: 1}
div#main div{width:400px;height:300px;position:absolute}
/*fun bits*/
div#div-1{
    background-color: red;
    left:200px;
    top:200px;
}
div#div-2{
    background-color: blue;
    left:1000px;
    top:800px;
}
div#div-3{
    background-color: green;
    left:200px;
    top:1200px;
}
div#div-4{
    background-color: purple;
    left:1500px;
    top:1500px;
}

JavaScript

$(document).ready(function(){
    $("div#div-1").rotate("-45deg")
    $("div#div-2").rotate("45deg")
    $("div#div-3").rotate("15deg")
    $("div#div-4").rotate("75deg")
    $("a").click(function(e){
        goTo($(this).attr("id").substring(4,5));
    });
});

// rotation function
function goTo(num){
    var obj = $("#div-"+num);
    var angle = 0-parseInt(obj.rotate());
    var pointX = parseInt(obj.css("left"));
    var pointY = parseInt(obj.css("left"));
    var newX = parseInt(Math.cos(angle) * pointX -Math.sin(angle) * pointY);
    var newY = parseInt(Math.sin(angle) * pointX + Math.cos(angle) * pointY);
    //console.log(angle,newX, newY);
    $('#main').animate({rotate: angle+"deg"}, 1000);  
    $("body").animate({scrollLeft:newX,scrollTop:newY},1000)
}