cube.js

var users = [
  {
    "id": "1",
    "pics": [
      {
        "image": "https://images.dog.ceo/breeds/clumber/n02101556_2642.jpg"
      },
      {
        "image": "https://images.dog.ceo/breeds/shihtzu/n02086240_5889.jpg"
      },
      {
        "image": "https://images.dog.ceo/breeds/waterdog-spanish/20180706_194432.jpg"
      }
    ]
  },
  {
    "id": "2",
    "pics": [
      {
        "image": "https://images.dog.ceo/breeds/spaniel-welsh/n02102177_24.jpg"
      },
      {
        "image": "https://images.dog.ceo/breeds/spaniel-welsh/n02102177_248.jpg"
      },
      {
        "image": "https://images.dog.ceo/breeds/entlebucher/n02108000_3074.jpg"
      }
    ]
  },
  {
    "id": "3",
    "pics": [
      {
        "image": "https://images.dog.ceo/breeds/germanshepherd/n02106662_10715.jpg"
      },
      {
        "image": "https://images.dog.ceo/breeds/briard/n02105251_853.jpg"
      },
      {
        "image": "https://images.dog.ceo/breeds/mastiff-tibetan/n02108551_598.jpg"
      }
    ]
  }
]

var cube = document.querySelector('.cube');
var currentClass = '';
var deg = 0;

function previous() {
  // cube.classList.add('show-left')
  var div = document.querySelector('.cube');
  deg = deg + 90;
    div.style.transform = 'translateZ(-100px)rotateY('+deg+'deg)';
}

function next() {
  // cube.classList.add('show-left')
  var div = document.querySelector('.cube');
  deg = deg - 90;
    div.style.transform = 'translateZ(-100px)rotateY('+deg+'deg)';
}