<div class="container">
  <div class="gridpaper">
    <div class="lazysusan" data-js-susan>
      <div class="box" data-js-dimsum>
        <div class="box__front gridpaper"></div>
        <div class="box__right gridpaper"></div>
        <div class="box__left gridpaper"></div>
        <div class="box__back gridpaper"></div>
        <div class="spots" data-js-spots></div>
      </div>
    </div>
  </div>
  
  <input class="input" type="range" min="-180" max="180" step="6" data-js-input />
  
  <div class="input__scale">
    <span class="input__scale__line input__scale__line--l">-180</span>
    <span class="input__scale__line input__scale__line--m">0</span>
    <span class="input__scale__line input__scale__line--r">+180</span>
  </div>
  
  <span class="input__readout" data-js-readout-1>0˚</span>
  <span class="input__readout" data-js-readout-2>frame 30</span>
  
  <h1>360˚ slider hotspot tracking (not IE11)</h1>
  
  <p>This is an experiment to test one feature: tracking hotspots in a 360˚ slider without constant 3d maths calculations or tracking the hotspots for every frame. In other words - how to make 360˚ hotspots maintainable in a sane and predictable way, while being able to adjust perspective (field of view) and eye height.</p>
  
  <p>The box is only a temporary respresentation of a "flickbook" of 60 images, that swap in and out as the slider moves around (eg <a href="http://360slider.com/" target="_blank">360 slider</a>). The box just makes it easier to visualize and adjust the perspective variables. I'll post some code on github once I've married up the image loading, spinning, hotspot tracking and hotspot activation.</p>
  
  <p>The hotspots are a JSON array of objects that have an X, Y and Z component, as well as the frame number where the hotspot should first appear and the last.</p>
  
  <p class="warning">This version only works for browsers that support <code>CSS 3d transforms</code>, and <code>transform-style: preserve-3d</code>. In essence it's built as if the world was sane, but IE10/11 only partially support this standard - <a href="https://codepen.io/pixelthing/pen/EgAJWr">here's a solution for IE10/11</a>. IE9 does not supports 3d transforms and will only display the hotspots for the default frame at page load.</p>
  
  <p><code>transform-style: preserve-3d</code> is needed for two reasons, firstly to allow us to make the spin logical - you spin the model and everything inherits that angle (much easier than tracking the angle of every element). And secondly so that the hotspots can be rotated to face the user at every angle.</p>
  
</div>

.container {
  width: 600px;
  margin: 0 auto;
  max-width: 100%;
}
.lazysusan {
  position: relative;
  width: 100%;
  padding-top: 55%;
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
  perspective: 1200px;
  perspective-origin: 50% 75%;
}
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 70%;
  margin: -18% 0 0 -40%;
  transform-style: preserve-3d;
  &__front,
  &__back {
    position: absolute;
    top: 0;
    left: 100%;
    width: 30%;
    height: 100%;
    margin: 0 0 0 -15%;
    background-color: #2ECC40;
    opacity: 0.8;
    transform: rotateY(90deg);
  }
  &__back {
    right: 100%;
    left: auto;
    margin: 0 -15% 0 0;
    background-color: #FFDC00;
  }
  &__left,
  &__right {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #FF4136;
    opacity: 0.8;
    transform: translateZ(70px);
  }
  &__right {
    background-color: #0074D9;
    transform: translateZ(-70px);
  }
}
.input {
  width: 100%;
  margin: 20px 0;
  &__scale {
    position: relative;
    border-bottom: 1px solid;
    margin-bottom: 50px;
    &__line {
      position: absolute;
      top: 10px;
      left: 0;
      width: 3em;
      margin: 0 0 0 -1.5em;
      text-align: center;
      &:before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 100%;
        height: 20px;
        border-left: 1px solid #666;
      }
      &--m {
        left: 50%;
      }
      &--r {
        left: 100%;
      }
    }
  }
  &__readout {
    display: block;
    margin: 10px 0;
    text-align: center;
    font-size: 2em;
  }
}

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

.spot {
  display: block;
  position: absolute;
  top: 0;
  max-height: 0;
  margin: -20px 0 0 -20px;
  text-align: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms;
  transform-style: preserve-3d;
  &--visible {
    max-height: 99px;
    opacity: 1;
    cursor: pointer;
    overflow: visible;
    transition-delay: 300ms;
  }
  &__inner {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    text-align: center;
    background-color: #fff;
    border: 1px solid #000;
    line-height: 38px;
  }
}






/* MISC */

* {
  box-sizing: border-box;
}
html {
  margin: 20px 50px;
  font-size: 16px;
  font-family: -apple-system, 
               BlinkMacSystemFont, 
               "Segoe UI", 
               Roboto, 
               Oxygen,
               Ubuntu,
               Cantarell,
               "Fira Sans",
               "Droid Sans",
               "Helvetica Neue", 
               sans-serif;
}

.gridpaper {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
  background-position: 10px 10px;
  background-size: 100px 100px;
  background-repeat: repeat;
  background-image: 
    linear-gradient(0deg, transparent 0px, transparent 99px , rgba(0,0,0,0.8) 100px ),
    linear-gradient(90deg, transparent 0px, transparent 99px , rgba(0,0,0,0.8) 100px ),
    linear-gradient(0deg, transparent 0px, transparent 49px , rgba(0,0,0,0.5) 50px, transparent 50px),
    linear-gradient(90deg, transparent 0px, transparent 49px , rgba(0,0,0,0.5) 50px, transparent 50px ),
    linear-gradient(0deg, 
      transparent 0px, transparent 9px , rgba(0,0,0,0.3) 10px, 
      transparent 10px, transparent 19px , rgba(0,0,0,0.3) 20px, 
      transparent 20px, transparent 29px , rgba(0,0,0,0.3) 30px, 
      transparent 30px, transparent 39px , rgba(0,0,0,0.3) 40px, 
      transparent 40px, transparent 59px , rgba(0,0,0,0.3) 60px, 
      transparent 60px, transparent 69px , rgba(0,0,0,0.3) 70px, 
      transparent 70px, transparent 79px , rgba(0,0,0,0.3) 80px, 
      transparent 80px, transparent 89px , rgba(0,0,0,0.3) 90px, 
      transparent 90px ), 
    linear-gradient(90deg, 
      transparent 0px, transparent 9px , rgba(0,0,0,0.3) 10px, 
      transparent 10px, transparent 19px , rgba(0,0,0,0.3) 20px, 
      transparent 20px, transparent 29px , rgba(0,0,0,0.3) 30px, 
      transparent 30px, transparent 39px , rgba(0,0,0,0.3) 40px, 
      transparent 40px, transparent 59px , rgba(0,0,0,0.3) 60px, 
      transparent 60px, transparent 69px , rgba(0,0,0,0.3) 70px, 
      transparent 70px, transparent 79px , rgba(0,0,0,0.3) 80px, 
      transparent 80px, transparent 89px , rgba(0,0,0,0.3) 90px, 
      transparent 90px );
}
.gridpaper>*:first-child {
  box-shadow: 0 0 5px;
  background: rgba(255,255,255,0.5);
}

p {
  line-height: 1.4;
}
.warning {
  color: #600;
  background-color: #fee;
}

code {
  display: inline-block;
  color: #0074D9;
  background-color: #eef;
  padding: 0 0.2em;
}

var wdf = {
  'hotspots': [
    {
      'y':      0,
      'x':      -220,
      'z':      0,
      'start':  34,
      'end':    58
    },
    {
      'y':      -80,
      'x':      -100,
      'z':      100,
      'start':  16,
      'end':    45
    },
    {
      'y':      80,
      'x':      200,
      'z':      51,
      'start':  16,
      'end':    44
    },
    {
      'y':      30,
      'x':      100,
      'z':      -100,
      'start':  46,
      'end':    14
    }
  ]
}

var $input = document.querySelector('[data-js-input]');
var $susan = document.querySelector('[data-js-susan]');
var $dimsum = document.querySelector('[data-js-dimsum]');
var $spotsContainer = document.querySelector('[data-js-spots]');
var $$swivels = null;
var $readout1 = document.querySelector('[data-js-readout-1]');
var $readout2 = document.querySelector('[data-js-readout-2]');
var steps = 0;
var angle = 0;
var frame = 0;

var init = function() {
  cutTheMustard();
  steps = ( parseInt($input.getAttribute('max')) - parseInt($input.getAttribute('min')) ) / parseInt($input.getAttribute('step'));
  angle = $input.value;
  frame = getFrame(angle);
  hotspotsInit(); 
  registerEvents();
  document.querySelector('[data-js-input]').value = 60;
  spin();
};

var cutTheMustard = function (){
  var element = document.createElement('p'),
      html = document.getElementsByTagName('HTML')[0],
      body = document.getElementsByTagName('BODY')[0],
      propertys = {
        'webkitTransformStyle':'-webkit-transform-style',
        'MozTransformStyle':'-moz-transform-style',
        'msTransformStyle':'-ms-transform-style',
        'transformStyle':'transform-style'
      };

    body.insertBefore(element, null);

    for (var i in propertys) {
        if (element.style[i] !== undefined) {
            element.style[i] = "preserve-3d";
        }
    }

    var st = window.getComputedStyle(element, null),
        transform = st.getPropertyValue("-webkit-transform-style") ||
                    st.getPropertyValue("-moz-transform-style") ||
                    st.getPropertyValue("-ms-transform-style") ||
                    st.getPropertyValue("transform-style");

    if(transform!=='preserve-3d'){
      html.className += 'no-preserve-3d';
    } else {
      html.className += 'preserve-3d';
    }
    document.body.removeChild(element);
};

var getFrame = function(angle) {
  return Math.round( ( ( parseInt(angle) + 180 )/360 ) * steps )
}

var spin = function(ev) {
  angle = $input.value;
  frame = getFrame(angle);
  spinObject(angle,frame);
  hotspotsCheck(angle,frame);
}

var spinObject = function() {
  $dimsum.style.transform = 'rotateY(' + angle + 'deg)';
  $readout1.innerText = angle + '˚';
  $readout2.innerText = 'frame ' + frame;
}

var hotspotsInit = function() {
  var hotspots = wdf.hotspots;
  var $hotspotEl = null;
  var $hotspotElInner = null;
  for(var i=0; i<hotspots.length; i++ ) {
    hotspotBuild(i);
  }
  $$swivels = document.querySelectorAll('[data-js-swivel]');
  hotspotsCheck();
};

var hotspotBuild = function(index) {
  
    $hotspotEl = document.createElement('span');
    $hotspotEl.classList.add('spot');
    $hotspotEl.id = 'spot' + index;
    $hotspotEl.style.transform = hotspotPlot(index);
    $hotspotEl.style.webkitTransform = hotspotPlot(index);
    
    $hotspotElInner = document.createElement('span');
    $hotspotElInner.classList.add('spot__inner');
    $hotspotElInner.setAttribute('data-js-swivel','');
    $hotspotElInner.innerText = index;
    
    $hotspotEl.appendChild($hotspotElInner);
    $spotsContainer.appendChild($hotspotEl);
  
}

var hotspotsCheck = function() {
  var hotspots = wdf.hotspots;
  var i = 0;
  var spot = null;
  hotspotsRotate();
  hotspotOn(i);
  for( i=0; i<hotspots.length; i++ ) {
    spot = hotspots[i];
    if ( 
      ( spot.end > spot.start && frame >= spot.start && frame <= spot.end )
      ||
      ( spot.end < spot.start && ( frame >= spot.start || frame <= spot.end ) )
    ) {
      hotspotOn(i);
    } else {
      hotspotOff(i);
    }
  }
}

var hotspotOn = function(index) {
  if (wdf.hotspots[index].visible !== true) {
    document.querySelector('#spot' + index).classList.add('spot--visible');
    wdf.hotspots[index].visible = true;
  }
}

var hotspotOff = function(index) {
  if (wdf.hotspots[index].visible === true) {
    document.querySelector('#spot' + index).classList.remove('spot--visible');
    wdf.hotspots[index].visible = false;
  }
}

var hotspotPlot = function(index) {
  var hotspotPlotX = wdf.hotspots[index].x + 'px';
  var hotspotPlotY = wdf.hotspots[index].y + 'px';
  var hotspotPlotZ = wdf.hotspots[index].z + 'px';
  return 'translate3d(' + hotspotPlotX + ', ' + hotspotPlotY + ', ' + hotspotPlotZ + ')';
}

var hotspotsRotate = function() {
  for(var i=0; i<$$swivels.length; i++) {
    $$swivels[i].style.transform = 'rotateY(' + (angle < 0 ? 360 - angle : '-' + angle) + 'deg)';
  }
}

var registerEvents = function() {
  $input.addEventListener('input',spin);
  $input.addEventListener('change',spin);
};

init();