JSFiddle - React, Tailwind, and code Playground

HTML

<div id="base">
    <div id="clip">
    <div id="image">
    </div>
    </div>
    </div>

CSS

div {
        overflow: hidden;
        -webkit-transform-style: preserve-3d;
    }
    #base {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        transition: all 0.3s;
    }
    #clip {
        width: 290px;
        height: 290px;
        -webkit-transform: rotateZ(-45deg);
        -webkit-transform-origin: 0px 0px;
    }
    #image {
        width: 200px;
        height: 200px;
        -webkit-transform: rotateZ(45deg);
        -webkit-transform-origin: 0px 0px;
        background-image: url(http://placekitten.com/200/300);
    }

    #base:hover {
        -webkit-transform: rotate3d(1,1,0,-45deg);
        -webkit-transform-origin: center center;
    }