JSFiddle - React, Tailwind, and code Playground

HTML

<div class="big">
    <div class="page" onclick="javascript:rotate(this)">
        page<br/>1
        test
    </div>

    <div class="page" onclick="javascript:rotate(this)">
        page<br/>2
        test
    </div>

    <div class="page" onclick="javascript:rotate(this)">
        page<br/>3
        test
    </div>
</div>

CSS

.big
{
width:1000px;
    transform: rotate(-45deg);
}

.page
{
width:100px;
    border: 1px solid red;
}

.page2
{
    transform: rotate(45deg);
    transform-origin: 300% 50%;
    transition:transform 1s ease-in;
}

JavaScript

rotate = function (obj)
{
    obj.className += " page2"
}