#vr-clipper
{
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  z-index: 0;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#vr-container
{
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-perspective: 200;
}

#vr-position
{
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ(199px);
}

#rotor-x
{
  -webkit-transform-style: preserve-3d;
}

#rotateX
{
  position: relative;
  width: 100%;  
  height: 300px;
  -webkit-transform-style: preserve-3d;

/*  -webkit-animation-name: x-spin;*/
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}

#rotor-y
{
  -webkit-transform-style: preserve-3d;
}

#rotateY
{
  position: relative;
  width: 100%;  
  height: 300px;
  -webkit-transform-style: preserve-3d;

/*  -webkit-animation-name: y-spin;*/
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}

#cube
{
  position: relative;
  width: 0;
  height: 0;
  top: 150px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
}

.face
{
  position: absolute;
  display: block;
  height: 300px;
  width: 300px;
  left: -150px;
  top: -150px;
/*  -webkit-background-size: 100% 100%;*/
  -webkit-backface-visibility: hidden;
}

/* left */
#face1
{
  -webkit-transform: translate3d(-149.5px, 0, 0) rotate3d(0, 1, 0, 90deg);
}

/* back */
#face2
{
  -webkit-transform: translate3d(0, 0, -149.5px);
}

/* right */
#face3
{
  -webkit-transform: translate3d(149.5px, 0, 0) rotate3d(0, 1, 0, -90deg);
}

/* front */
#face4
{
  -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, -149.5px);
}

/* top */
#face5
{
  -webkit-transform: translate3d(0, -149.5px, 0) rotate3d(1, 0, 0, -90deg) rotate3d(0, 0, 1, 90deg);
}

/* bottom */
#face6
{
  -webkit-transform: translate3d(0, 149.5px, 0) rotate3d(1, 0, 0, 90deg) rotate3d(0, 0, 1, -90deg);
}

@-webkit-keyframes left-x-spin {
  0%    { -webkit-transform: rotateY(0deg); }
  50%   { -webkit-transform: rotateY(180deg); }
  100%  { -webkit-transform: rotateY(360deg); }
}

@-webkit-keyframes right-x-spin {
  0%    { -webkit-transform: rotateY(0deg); }
  50%   { -webkit-transform: rotateY(-180deg); }
  100%  { -webkit-transform: rotateY(360deg); }
}

@-webkit-keyframes down-y-spin {
  0%    { -webkit-transform: rotateX(0deg); }
  50%   { -webkit-transform: rotateX(180deg); }
  100%  { -webkit-transform: rotateX(360deg); }
}

@-webkit-keyframes up-y-spin {
  0%    { -webkit-transform: rotateX(0deg); }
  50%   { -webkit-transform: rotateX(-180deg); }
  100%  { -webkit-transform: rotateX(360deg); }
}