JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div>This is the body</div>

CSS

* {
    box-sizing: border-radius;
    margin: 0;
    padding: 0;
}
body{
    transform: rotate(0deg);
    border: 1px solid red;
    height: 100%;
    width: 100%;
}

html {
    height: 100%; width: 100%;
    border: 1px solid blue;
}

JavaScript

$("body").click(function() {
    var body = document.getElementsByTagName("body")[0];
    var height = $(window).height();
    var width = $(window).width();
    var x = getPosition(body)["x"];
    var y = getPosition(body)["y"];
    alert(x + " " + y);
    if ($(this).css("transform").indexOf("-1") == -1){
        $(this).css("transform", "rotate(-90deg)");
        $(this).css("width", height + "px");
        $(this).css("height", width + "px");}
    else{
        $(this).css("transform", "rotate(0deg)");
        $(this).css("width", width + "px");
        $(this).css("height", height + "px");}
});

    function getPosition(element) {
        var xPosition = 0;
        var yPosition = 0;

        while (element) {
            xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
            yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
            element = element.offsetParent;
        }
        return { x: xPosition, y: yPosition };
    }