Flippin' device

by Allen N.

HTML

<div class="device-outer-container skin">
  <div class="device-container">
    <div class="device">
      <div class="front"></div>
      <div class="frontsback"></div>
      <div class="back"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="top"></div>
      <div class="bottom"></div>
    </div>
  </div>
</div>

SCSS

$device-width: 424px;
$device-height: 898px;
$device-thickness: 33px;
$device-tilt: 0deg;
$speed: 4s;
$device-scale: 30; // out of 100%
$corner-radius: 20px;
$skin-color: #222;
$play-state: running; // paused or running
$glow-color: gold;
$glow-opacity: 0.4;

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

@keyframes rotation-3d {
  from { transform: rotateY(40deg) rotateX($device-tilt); }
  to { transform: rotateY(400deg) rotateX($device-tilt); }
/* 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 linear;
    animation-play-state: $play-state;
    cursor: pointer;

    div {
      position: absolute;
      overflow: hidden;
      background-size: 102% 102%;

      &.front {
        width: $device-width;
        height: $device-height;
        background-color: magenta;
        transform: rotateY(0deg) translateZ($device-thickness/2);
        border-radius: $corner-radius;
        .skin & {
          background-color: $skin-color;
          background-image: url('https://allenski.com/images/a/pixel-6-homescreen.png');
          background-image: url('https://allenski.com/images/a/pixel6-front.png');
        }
      }
      &.frontsback,
      &.back {
        width: $device-width;
        height: $device-height;
        transform: rotateY(180deg) translateZ($device-thickness/2);
    ...