JSFiddle - React, Tailwind, and code Playground

HTML

<div class=wrapper>
    <div></div>
</div>

<div class=wrapper>
    <div class=translate>translate</div>
</div>

<div class=wrapper>
    <div class=transform-origin>transform-origin</div>
</div>

CSS

.wrapper {
    background: grey;
    float: left;
    margin: 50px;
}
.wrapper div {
    background: blue;
    color: #fff;
    font: 14px/20px sans-serif;
    height: 80px;
    padding-top: 20px;
    text-align: center;
    text-transform: uppercase;
    width: 100px;
    -webkit-transform: rotate(15deg);
       -moz-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
         -o-transform: rotate(15deg);
            transform: rotate(15deg);
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}
.wrapper .translate {
    background: red;
    -webkit-transform: rotate(15deg) translate(100%, 100%);
       -moz-transform: rotate(15deg) translate(100%, 100%);;
        -ms-transform: rotate(15deg) translate(100%, 100%);;
         -o-transform: rotate(15deg) translate(100%, 100%);;
            transform: rotate(15deg) translate(100%, 100%);;
}
.wrapper .transform-origin {
    background: green;
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
.wrapper div:hover {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
}