JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>

CSS

.box {
    width: 400px;
    height: 400px;
    transform-origin: bottom right;
    background:red;
    margin: 50px;
    animation: a linear 2s infinite;
    background: url(http://picsum.photos/1200/900) no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}
@keyframes a {
    50% {
        transform: translate3d(0,400px,0) rotate(116deg) scale(1.3
        );
        clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);

    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

        transform: translate3d(0,0px,0) rotate(0deg) scale(1);
    }
}