<div id="viewport">
    <div id="world">
        <div class="coords">
            <div class="x-y-begin">x-y-begin</div>
            <div class="x-axis">x-axis</div>
            <div class="y-axis">y-axis</div>
        </div>

        <div class="wall-yellow wall1">wall1</div>
        <div class="wall-yellow wall2">wall2</div>
        <div class="wall-yellow wall3">wall3</div>
        <div class="wall-yellow wall4">wall4</div>
        <div class="wall-yellow wall5">wall5</div>
    </div>
</div>
body{
    min-height:400px;
    margin:0;
    position:relative;
}

body,html{
    height:100%;
    min-height:100%;
}

#viewport{
    bottom:0;
    left:0;
    overflow:hidden;
    perspective:400;
    position:absolute;
    right:0;
    top:0;
    perspective:400px;
}

#world{
    height:512px;
    left:50%;
    margin-left:-256px;
    margin-top:-256px;
    position:absolute;
    top:50%;
    width:512px;
    background:url(https://hospodarets.com/img/blog/1485110178212505000.jpg);
    background-size:512px 512px;
}

#world{
    --translateZ:0;
    --rotateX:65;
    --rotateY:0;

    transform-style:preserve-3d;
    transform:translateZ(calc(var(--translateZ) * 1px)) rotateX(calc(var(--rotateX) * 1deg)) rotateY(calc(var(--rotateY) * 1deg));
}

.coords{
    position:absolute;
    top:50%;
    left:50%;
}

.coords>*{
    width:100px;
    height:100px;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    line-height:100px;
    background:green;
    transform:translateX(-50%) translateY(-50%);
}

.x-axis{
    left:200px;
}

.y-axis{
    top:200px;
}

.wall-yellow{
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:200px;
    background:yellow;
    margin:-100px 0 0 -100px;
    vertical-align:middle;
    display:inline-block;
    text-align:center;
    opacity:.5;
}

.wall-yellow:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.wall1{
    transform:translateZ(200px) rotateX(0deg) rotateY(0deg);
}

.wall2{
    transform:translateZ(100px) translateY(100px) rotateX(90deg) rotateY(0deg);
}

.wall3{
    transform:translateZ(100px) translateY(-100px) rotateX(90deg) rotateY(0deg);
}

.wall4{
    transform:translateZ(100px) translateX(-100px) rotateX(0deg) rotateY(90deg);
}

.wall5{
    transform:translateZ(100px) translateX(100px) rotateX(0deg) rotateY(90deg);
}
class css3dCube {
  constructor() {
    this.worldEl = document.querySelector('#world');

    this.worldZ = 0;
    this.worldXAngle = 0;
    this.worldYAngle = 0;

    this.bindEvents();
  }

  // CSS
  updateView() {
    this.worldEl.style.setProperty('--translateZ', this.worldZ);
    this.worldEl.style.setProperty('--rotateX', this.worldXAngle);
    this.worldEl.style.setProperty('--rotateY', this.worldYAngle);
  }

  // EVENTS
  onMouseWheel(e) {

    let delta;
    if (e.detail) {
      delta = e.detail * -5;
    } else if (e.wheelDelta) {
      delta = e.wheelDelta / 8;
    } else {
      delta = e.deltaY;
    }

    if (!delta) return;

    this.worldZ += delta * 5;

    // scroll/perspective check
    if (this.worldZ > 300) {
      this.worldZ = 300;
    } else if (this.worldZ < -3000) {
      this.worldZ = -3000;
    } else {
      e.preventDefault();
    }

    this.updateView();
  };

  onMouseMove(e) {
    this.worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180;
    this.worldYAngle = -(.5 - (e.clientX / window.innerWidth)) * 180;
    this.updateView();
  };

  bindEvents() {
    window.addEventListener('mousewheel', this.onMouseWheel.bind(this));
    window.addEventListener('DOMMouseScroll', this.onMouseWheel.bind(this));
    window.addEventListener('mousemove', this.onMouseMove.bind(this));
  };
}

new css3dCube();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.