JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<div class="div1"></div>
<div class="div2"></div>
CSS
html{
height:100%;
}
body{
perspective:500px;
height:100%;
margin:0px;
background-color:#000;
}
.div1{
transform:rotateX(90deg) scaleX(10) scaleY(10) scaleZ(10);
}
.div2{
transform:rotateX(90deg) translateZ(2000px) scaleX(10) scaleY(10) scaleZ(10);
}
div{
position:absolute;
top:50%;
left:50%;
margin-left:-50%;
backface-visibility:hidden;
background-image:url(http://img01.deviantart.net/602c/i/2011/313/9/3/seamless_dirt_ground_texture_by_hhh316-d4fon0w.jpg);
width:1000px;
height:1000px;
animation: walk 10s infinite linear;
}
@keyframes walk{
0% { background-position: 0px 0px; }
100% { background-position: 0px 900px; }
}