Flippin' phone skinned

by Allen N.

HTML

<div class="device-outer-container skin">
  <div class="device-container">
    <div class="device">

      <div class="front"></div>
      <div class="back"></div>
      <div class="left"></div>
      <div class="right">
        <div class="buttons">
        
          <div class="button one">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top">
              <span></span><span></span><span></span>
            </div>
            <div class="bottom">
              <span></span><span></span><span></span>
            </div>
          </div>
        
          <div class="button two">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top">
              <span></span><span></span><span></span>
            </div>
            <div class="bottom">
              <span></span><span></span><span></span>
            </div>
          </div>
          
        </div>
      </div>
      <div class="top"></div>
      <div class="bottom"></div>

      <div class="corner top left">
        <div class="strip-1"></div>
        <div class="strip-2"></div>
        <div class="strip-3"></div>
        <div class="strip-4"></div>
        <div class="strip-5"></div>
      </div>

      <div class="corner top right">
        <div class="strip-1"></div>
        <div class="strip-2"></div>
        <div class="strip-3"></div>
        <div class="strip-4"></div>
        <div class="strip-5"></div>
      </div>

      <div class="corner bottom left">
        <div class="strip-1"></div>
        <div class="strip-2"></div>
        <div class="strip-3"></div>
        <div class="strip-4"></div>
        <div class="strip-5"></div>
      </div>

      <div class="corner bottom right">
        <div class="strip-1"></div>
        <div class="strip-2"></div>
        <div class="strip-3"></div>
        <div class="strip-4"></div>
        <div class="strip-5"></div>
      </div>

    </div>
  </div>
</div>

SCSS

$device-width: 529px;
$device-height: 1200px;
$device-thickness: 22px;
$device-tilt: 0deg;
$speed: 7s ;
$device-scale: 25; // out of 100%
$corner-radius: 32px;
$skin-color: #222222;
$play-state: running; // paused or running
$glow-color: limegreen;
$glow-opacity: 0.4;
$color-opacity: 0.9;
$buttons-width: 80%;
$buttons-radius: $device-thickness/2;
$buttons-stick-out: 5px;
$buttons-contrast: 3%;

html, body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #121212;
}

@keyframes rotation-3d {
from { transform: rotateY(0deg) rotateX(-$device-tilt); }
  to { transform: rotateY(360deg) rotateX(-$device-tilt); }
/* 0% { transform: rotateY(40deg) rotateX($device-tilt) rotateZ(0deg); }
  50% { transform: rotateY(-40deg) rotateX($device-tilt) rotateZ(0deg); }
  100% { transform: rotateY(40deg) rotateX($device-tilt) rotateZ(0deg); } */
/* 0% { transform: rotateY(-30deg) rotateX($device-tilt) rotateZ(0deg); }
  50% { transform: rotateY(-70deg) rotateX($device-tilt) rotateZ(0deg); }
  100% { transform: rotateY(-30deg) rotateX($device-tilt) rotateZ(0deg); } */
/* from { transform: rotateX(40deg) rotateY($device-tilt); }
  to { transform: rotateX(400deg) rotateY($device-tilt); } */
}

.device-outer-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale($device-scale/100);
}

.device-container {
  width: $device-width;
  height: $device-height;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  filter: drop-shadow(0 0 111px rgba($glow-color, $glow-opacity));

  .device {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    transform: rotateY(-$device-tilt) rotateX(-$device-tilt);
    animation: rotation-3d $speed infinite ease-in-out;
    animation-play-state: $play-state;
    cursor: pointer;
  
    * {
      /* border: 1px solid white !important; */
    }

    & > div:not(.corner) {
      position: absolute;
      
     ...