JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<div class="box">
<div class="deg"></div>
</div>
CSS
body {
margin: 0;
overflow: hidden;
}
div.box {
width: 100%;
height: 300vh;
top: -100vh;
background: red;
position: relative;
transform: rotate(90deg);
overflow: hidden;
transform-origin: bottom left;
animation: a 1s infinite;
}
div.box div.deg {
width: 100%;
height: 100vh;
position: absolute;
top: 100vh;
left: 0;
transform: rotate(-90deg);
transform-origin: bottom left;
background: url(http://picsum.photos/1200/900) no-repeat;
animation: a 1s infinite;
}
@keyframes a {
100% { transform: rotate(0deg) }
}