<div class="scene">
  <div class="box">
    <div class="box__face box__face--front"></div>
    <div class="box__face box__face--back"></div>
    <div class="box__face box__face--right"></div>
    <div class="box__face box__face--left"></div>
    <div class="box__face box__face--top"></div>
    <div class="box__face box__face--bottom"></div>
  </div>
</div>
body {
  width: 100%;
  height: 100%;
  background-color: khaki;
  background-color: #ffa69e;
  background-image: linear-gradient(24deg, #bb866e 0%, #9d6684 78%);
  background-color: #000000;
  background-image: linear-gradient(315deg, #222222 0%, #7f8c8d 81%);
  background-color: #ffeaa7;
  background-image: linear-gradient(-315deg, #bb8a77 0%, #663333 63%);
  background: #c31432;
  background: -webkit-linear-gradient(to left, #240b36, #c31432); 
  background: linear-gradient(to right, #440b36, #c31432);
  background: #f12711;
  background: -webkit-linear-gradient(to left, #f5af19, #f12711);
  background: linear-gradient(to right, #f5af19, #f12711);
}

.scene {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 0px solid #CCC;
  margin-top: 180px;
  left: 50%;
  margin-left: -152px;
  perspective: 400px;
  transform: scale(1.8);
}

.box {
  width: 300px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  transition: transform 2.4s;
}

.box.show-front  { transform: translateZ( -50px) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-150px) rotateY( -90deg); }
.box.show-left   { transform: translateZ(-150px) rotateY(  90deg); }
.box.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }


.box__face {
  position: absolute;
  border: 0px solid teal;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.box__face--front,
.box__face--back {
  width: 300px;
  height: 200px;
  line-height: 200px;
}

.box__face--right,
.box__face--left {
  width: 100px;
  height: 200px;
  width: 100px;
  height: 200px;
  left: 100px;
  line-height: 200px;
}

.box__face--top,
.box__face--bottom {
  width: 300px;
  height: 100px;
  top: 50px;
  line-height: 100px;
}

/* .box__face--front  { background: hsla(  0, 100%, 50%, 0.6); }
.box__face--right  { background: hsla( 60, 100%, 50%, 0.6); }
.box__face--back   { background: hsla(120, 100%, 50%, 0.6); }
.box__face--left   { background: hsla(180, 100%, 50%, 0.6); }
.box__face--top    { background: hsla(240, 100%, 50%, 0.6); }
.box__face--bottom { background: hsla(300, 100%, 50%, 0.6); } */

.box__face--front  { background: url('https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1601&q=80'); background-size: cover;}
.box__face--right  { background: url('https://images.unsplash.com/photo-1500323413110-71ec8ed382f0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80'); background-size: cover;}
.box__face--back   { background: url('https://images.unsplash.com/photo-1419064642531-e575728395f2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); background-size: cover;}
.box__face--left   { background: url('https://images.unsplash.com/photo-1537518588317-e5cc1e331f88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=657&q=80'); background-size: cover;}
.box__face--top    { background: url('https://images.unsplash.com/photo-1485081669829-bacb8c7bb1f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); background-size: contain; opacity: 0.9;}
.box__face--bottom { background: url('https://images.unsplash.com/photo-1448518340475-e3c680e9b4be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80'); background-size: contain; opacity: 0.9;}

.box__face--front  { transform: rotateY(  0deg) translateZ( 50px); }
.box__face--back   { transform: rotateY(180deg) translateZ( 50px); }

.box__face--right  { transform: rotateY( 90deg) translateZ(150px); }
.box__face--left   { transform: rotateY(-90deg) translateZ(150px); }

.box__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.box__face--bottom { transform: rotateX(-90deg) translateZ(100px); }
var box = document.querySelector('.box');

var boxFaceFront = document.querySelector('.box__face--front');
var boxFaceBack = document.querySelector('.box__face--back');
var boxFaceLeft = document.querySelector('.box__face--left');
var boxFaceRight = document.querySelector('.box__face--right');
var boxFaceTop = document.querySelector('.box__face--top');
var boxFaceBottom = document.querySelector('.box__face--bottom');

var currentClass = '';
var active = 'front';

function sideInit() {
  
  var showClass = 'show-front';
  if ( currentClass ) {
    box.classList.remove( currentClass );
  }
  box.classList.add( showClass );
  currentClass = showClass;
  
  setTimeout(changeSideAuto, 6000);
  
}

sideInit();

function changeSideAuto() {
  
  var photoURL1 = 'https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1490&q=80';
  
  var photoURL2 = 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL3 = 'https://images.unsplash.com/photo-1500336866626-5a47b3158a48?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL4 = 'https://images.unsplash.com/photo-1493501471057-d774f693bd69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL5 = 'https://images.unsplash.com/photo-1445497680841-3fb9096cb55a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80';
  
  var photoURL6 = 'https://images.unsplash.com/photo-1431057259500-78dd318a0a75?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL7 = "https://images.unsplash.com/photo-1420802498636-9d647b43d2eb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL8 = "https://images.unsplash.com/photo-1500470375228-7e498a284287?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL9 = "https://images.unsplash.com/photo-1504700610630-ac6aba3536d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL10 = "https://images.unsplash.com/photo-1482148454461-aaedae4b30bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL11 = "https://images.unsplash.com/photo-1430375642086-147fcd5fea57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1519&q=80";

  var photoURL12 = "https://images.unsplash.com/photo-1521520998159-8e5980c81192?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL13 = "https://images.unsplash.com/photo-1470940383688-5eae6a3d940c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1257&q=80";
  
  var photoURL14 = "https://images.unsplash.com/photo-1441312311734-f44cc0bda31d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL15 = "https://images.unsplash.com/photo-1527009063186-a80dd0ef0958?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL16 = "https://images.unsplash.com/photo-1416368466422-e2064283cb95?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80";
  
  var photoURL17 = "https://images.unsplash.com/photo-1475598322381-f1b499717dda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80";
  
  var photoURL18 = "https://images.unsplash.com/photo-1519305124423-5ccccff55da9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80";
  
  var photoURL19 = 'https://images.unsplash.com/photo-1516207527161-f616df3a5eda?ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80';
  
  var photoURL20 = 'https://images.unsplash.com/photo-1416949929422-a1d9c8fe84af?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80';
  
  var photoURL21 = 'https://images.unsplash.com/photo-1526137755315-124801590ce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80';
  
  var photoURL22 = 'https://images.unsplash.com/photo-1534826249391-131b0b415668?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL23 = 'https://images.unsplash.com/photo-1579117446659-dfee9459fab8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=982&q=80';
  
  var photoURL24 = 'https://images.unsplash.com/photo-1586634096953-dadf307b9d97?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80';
  
  var photoURL25 = 'https://images.unsplash.com/photo-1587993654179-9f0c084b69c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL26 = 'https://images.unsplash.com/photo-1596484553013-c7ca96fbd7d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL27 = 'https://images.unsplash.com/photo-1603334877732-be08525edb97?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL28 = 'https://images.unsplash.com/photo-1603334987939-dd677d05eaff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL29 = 'https://images.unsplash.com/photo-1603335652837-ff0a7e6f895f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL30 = 'https://images.unsplash.com/photo-1579184681071-5902b32c8a22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL31 = 'https://images.unsplash.com/photo-1576395056708-878c3d9864e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL32 = 'https://images.unsplash.com/photo-1576947749093-a0502092a721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoURL33 = 'https://images.unsplash.com/photo-1570884745219-97e8a1f09229?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80';
  
  var photoURL34 = 'https://images.unsplash.com/photo-1577028528806-c47fbf23370a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1360&q=80';
  
  var photoURL35 = 'https://images.unsplash.com/photo-1577029610311-4ee831521ccf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1385&q=80';
  
  var photoURL36 = 'https://images.unsplash.com/photo-1576054132013-d848d0fa7d93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  // https://images.unsplash.com/photo-1592613824182-cf1790a5a17d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1369&q=80
  
  var photoHigh1 = 'https://images.unsplash.com/photo-1529612742026-938119ef0b77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh2 = 'https://images.unsplash.com/photo-1536107026912-d993e101312f?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh3 = 'https://images.unsplash.com/photo-1447012256906-c2ed7aa5632e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=626&q=80';
  
  var photoHigh4 = 'https://images.unsplash.com/photo-1518001215135-ff041c7054b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh5 = 'https://images.unsplash.com/photo-1464030022147-274fa3fb198b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=656&q=80';
  
  var photoHigh6 = 'https://images.unsplash.com/photo-1429552077091-836152271555?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=632&q=80';
  
  var photoHigh7 = 'https://images.unsplash.com/photo-1519883248908-9442c3cdc292?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh8 = 'https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh9 = 'https://images.unsplash.com/photo-1526241671692-e7d3195c9531?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh10 = 'https://images.unsplash.com/photo-1579782628902-4581a733108a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80';
  
  var photoHigh11 = 'https://images.unsplash.com/photo-1567723390830-b52cf40fc3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80';
  
  var photoHigh12 = 'https://images.unsplash.com/photo-1567958115409-d938cf0ea72e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh13 = 'https://images.unsplash.com/photo-1586407014176-b592d6e2d16b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80';
  
  var photoHigh14 = 'https://images.unsplash.com/photo-1581060238433-a5d4f6b6280a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=632&q=80';
  
  var photoHigh15 = 'https://images.unsplash.com/photo-1587712123443-036970f23a73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=564&q=80';
  
  var photoHigh16 = 'https://images.unsplash.com/photo-1589787787722-c8044f194cf5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80';
  
  var photoHigh17 = 'https://images.unsplash.com/photo-1584982383999-96a4b5ba5e07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';
  
  var photoHigh18 = 'https://images.unsplash.com/photo-1584203660326-dda788417314?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80';
  
  var photoWide1 = 'https://images.unsplash.com/photo-1446296585585-07bfb2275dfa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80';
  
  var photoWide2 = 'https://images.unsplash.com/photo-1430391553909-82e0eed4d127?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide3 = 'https://images.unsplash.com/photo-1466354424719-343280fe118b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide4 = 'https://images.unsplash.com/photo-1534947379496-bedc63409670?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80';
  
  var photoWide5 = 'https://images.unsplash.com/photo-1517416451146-496a3e48ab6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80';
  
  var photoWide6 = 'https://images.unsplash.com/photo-1517508342920-2166aef998c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80';
      
  var photoWide7 = 'https://images.unsplash.com/photo-1515467766357-c21fc4a140f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide8 = 'https://images.unsplash.com/photo-1518305977051-206f2aee76a0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide9 = 'https://images.unsplash.com/photo-1506611543027-f4da1407dee6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80';
  
  var photoWide10 = 'https://images.unsplash.com/photo-1598206928494-b816a1f89881?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1991&q=80';
  
  var photoWide11 = 'https://images.unsplash.com/photo-1519399469273-1152f8a3afd5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide12 = 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80';
  
  var photoWide13 = 'https://images.unsplash.com/photo-1452719265449-25a1ea553885?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80';
  
  var photoWide14 = 'https://images.unsplash.com/photo-1492428022435-b5cebd5738b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide15 = 'https://images.unsplash.com/photo-1506304487340-47d9f5228da2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
  
  var photoWide16 = 'https://images.unsplash.com/photo-1525480760809-9f2b50deedf4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80';
  
  var photoWide17 = 'https://images.unsplash.com/photo-1525480659061-084663ace5cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80';
  
  var photoWide18 = 'https://images.unsplash.com/photo-1596907731844-b2c4156abab0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80';
  
  var photoArr = [photoURL1, photoURL2, photoURL3, photoURL4, photoURL5, photoURL6, photoURL7, photoURL8, photoURL9, photoURL10, photoURL11, photoURL12, photoURL13, photoURL14, photoURL15, photoURL16, photoURL17, photoURL18, photoURL19, photoURL20, photoURL21, photoURL22, photoURL23, photoURL24, photoURL25, photoURL26, photoURL27, photoURL28, photoURL29, photoURL30];
  
  var phHighArr = [photoHigh1, photoHigh2, photoHigh3, photoHigh4, photoHigh5, photoHigh6, photoHigh7, photoHigh8, photoHigh9, photoHigh10, photoHigh11, photoHigh12, photoHigh13, photoHigh14, photoHigh15, photoHigh16, photoHigh17, photoHigh18];
  
  var phWideArr = [photoWide1, photoWide2, photoWide3, photoWide4, photoWide5, photoWide6, photoWide7, photoWide8, photoWide9, photoWide10, photoWide11, photoWide12, photoWide13, photoWide14, photoWide15, photoWide16, photoWide17, photoWide18];
  
  var photoIndex = Math.floor(Math.random() * 30);
  var phHighIndex = Math.floor(Math.random() * 18);
  var phWideIndex = Math.floor(Math.random() * 18);
  
  var showSide = ['front', 'back', 'right', 'left', 'top', 'bottom'];
  
  var showIndex = Math.floor(Math.random() * 6);
  
  var showClass = 'show-' + showSide[showIndex];
  
  if ( currentClass ) {
    box.classList.remove( currentClass );
  }
  
  box.classList.add( showClass );
  currentClass = showClass;
  active = showSide[showIndex];
  
  if (active == 'front') {
    
    boxFaceBack.style.background = 'url(' + photoArr[photoIndex] + ')';
    boxFaceBack.style.backgroundSize = 'cover';
    
  }
  
  if (active == 'back') {
    
    boxFaceFront.style.background = 'url(' + photoArr[photoIndex] + ')';
    boxFaceFront.style.backgroundSize = 'cover';
    
  }
  
  if (active == 'left') {
    
    boxFaceRight.style.background = 'url(' + phHighArr[phHighIndex] + ')';
    boxFaceRight.style.backgroundSize = 'cover';
    
  }
  
  if (active == 'right') {
    
    boxFaceLeft.style.background = 'url(' + phHighArr[phHighIndex] + ')';
    boxFaceLeft.style.backgroundSize = 'cover';
    
  }
  
  if (active == 'top') {
    
    boxFaceBottom.style.background = 'url(' + phWideArr[phWideIndex] + ')';
    boxFaceBottom.style.backgroundSize = 'contain';
    
  }
  
  if (active == 'bottom') {
    
    boxFaceTop.style.background = 'url(' + phWideArr[phWideIndex] + ')';
    boxFaceTop.style.backgroundSize = 'contain';
    
  }
  
  setTimeout(changeSideAuto, 6000);
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.