JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="scene">
  <div class="walls">
    <div class="wall wall-up"></div>
    <div class="wall wall-left"></div>
    <div class="wall wall-right"></div>
  </div>
</div>

SCSS

body {
  background-color: #333;
}
.scene {
  height: 300px;
  width: 500px;
  border: 1px solid #000;
  margin: 50px auto;
  perspective: 400px;
  overflow: hidden;
}

.walls {
  &:hover {
    transform: translateZ(1500px);
  }
  position: relative;
  height: 100%; width: 100%;
  transform-style: preserve-3d;
  transition: transform 2s linear;
  /* overflow: hidden; */
  
  .wall {
    height: 100%;
    width: 800px;
    background-image: url(https://i.pinimg.com/236x/8b/d1/1b/8bd11b7ad7a580063529e16adbe9e6e9--metro-tiles-seamless-textures.jpg);
    position: absolute;
    top: 0;
    &-left {
      left: 0;
      transform-origin: left;
      transform: rotateY(85deg);
    }
    &-right {
      right: 0;
      transform-origin: right;
      transform: rotateY(-85deg);
    }
    &-up {
      top: 0;
      left: 0;
      width: 100%;
      height: 800px;
      transform-origin: top;
      transform: rotateX(-90deg);
    }
  }
}