JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo"></div>
<main>
  <button @click="gridSlide(0)">0</button>
  <button @click="gridSlide(.25)">.25</button>
  <button @click="gridSlide(.5)">.5</button>
  <button @click="gridSlide(.75)">.75</button>
  <button @click="gridSlide(1)">1</button>
</main>

CSS

html, body, main, .foo {
  margin: 0;
  height: 100vh;
}

body {
  perspective: 400px;
  overflow: hidden;
  background-color: #000;
}

.foo {
  background-image: linear-gradient(0deg, cyan 0, transparent 2px), linear-gradient(90deg, cyan 0, transparent 2px);
  background-position: top;
  background-size: 40px 80px;
  transition: transform 5s;
  transform: translate(calc(-50vw - var(--p, 0) * 200vw), 0%) rotateX(45deg);
  width: 400%;
  height: 200%;
  position: absolute;
}

main {
  color: white;
  margin: 10vmin;
}

Vue

new Vue({
	el: 'main',
  methods: {
  	gridSlide(p) {
    	document.querySelector('.foo').style.setProperty('--p', p);
    }
  }
});