JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    height: 200px;
    width: 200px;
    position: relative;
    top: 140px;
    left: 120px;
    -webkit-transform: rotate(-45deg) skewX(10deg) skewY(10deg);
    -moz-transform: rotate(-45deg) skewX(10deg) skewY(10deg);
    transform: rotate(-45deg) skewX(10deg) skewY(10deg);
    background: red;
    transition: 0.8s linear all;
}
div:hover {
    -webkit-transform: rotate(-45deg) skewX(-30deg) skewY(-30deg);
    -moz-transform: rotate(-45deg) skewX(-30deg) skewY(-30deg);
    transform: rotate(-45deg) skewX(-30deg) skewY(-30deg);
    transition: 0.8s linear all;
}