Home Only CSS: Metal

See the Pen
Only CSS: Metal by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

HTML

mixin cameras
  .container
    //- - for (i = 0; i < 441; i++)
    //-   .trigger
    .monitor
      .camera.-z
        .camera.-y
          .camera.-x
            block

+cameras
  .cube
    .scale
      .rotate
        .surface.-a
        .surface.-b
        .surface.-c
        .surface.-d
        .shadow

CSS

// Custom param *** START
$power: 20;
$defaultRotateX: 0;
$defaultRotateY: 0;
$defaultRotateZ: 0;
$perspective: 500px;
// Custom param *** END

// Your world *** START
.abc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background: #000;
  color: #fff;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.cube {
  .scale {
    transform: scale(1.2, 0.7);
  }

  .surface {
    position: absolute;
    width: 200px;
    height: 200px;
    top: -100px;
    left: -100px;
    // background: rgba(#333, 1);
    background: linear-gradient(-30deg, #333, #555);
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      width: 300%;
      height: 300%;
      top: -150%;
      background: radial-gradient(closest-side, #fff 0%, #fff 20%, #333 100%);
      filter: blur(50px);
      transform: translateX(-100%);
      animation: refrection 10000ms ease-out infinite;
    }
    
    &.-a {
      transform: rotateY(0deg) translateZ(100px);
      
      &::before {
        animation-delay: 0ms - 1000ms;
      }
    }
    
    &.-b {
      transform: rotateY(180deg) translateZ(100px);
      
      &::before {
        animation-delay: 5000ms - 1000ms;
      }
    }
    
    &.-c {
      transform: rotateY(90deg) translateZ(100px);
      
      &::before {
        animation-delay: 2500ms - 1000ms;
      }
    }
    
    &.-d {
      transform: rotateY(-90deg) translateZ(100px);
      
      &::before {
        animation-delay: 7500ms - 1000ms;
      }
    }
  }
  
  .shadow {
    position: absolute;
    width: 200px;
    height: 200px;
    top: -100px;
    left: -100px;
    background: rgba(#000, 0.6);
    filter: blur(30px);
    transform: rotateX(-90deg) translateZ(130px) scale(0.92);
  }
  
  .rotate {
    // transform: rotateY(45deg);
    animation: rotation 10000ms linear infinite;
  }
}

@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  
  100% {
    transform: rotateY(-360deg);
  }
}

@keyframes refrection {
  0% {
    transform: translateX(-100%);
  }
  
  90% {
    transform: translateX(100%);
  }
  
  100% {
    transform: translateX(100%);
  }
}
// Your world *** END

// Template *** START
div {
  transform-style: preserve-3d;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: radial-gradient(#333, #111, #000);
}

.container {
  position: relative;
  display: grid;
  grid-template-rows: repeat(21, 4.77vh);
  grid-template-columns: repeat(21, 4.77vw);
  transform-style: preserve-3d;
  cursor: zoom-in;
  
  &:active {
    .monitor {
      transform: scale3d(2,2,2);
    }
  }
}

.monitor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  perspective: $perspective;
  transition: 1000ms;
}

// .trigger {
//   position: relative;
  
//   @for $i from 1 through 21 {
//     @for $j from 1 through 21 {
//       $key: ($i - 1) * 21 + $j;
      
//       &:nth-child(#{$key}) {
//         &:hover ~ .monitor {
//           .camera {
//             &.-x {
//               transform: rotateX(($i - 11deg) * $power);
//             }
            
//             &.-y {
//               transform: rotateY(($j - 11deg) * $power);
//             }
//           }
//         }
//       }
//     }
//   }
// }

.camera {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 500ms;
  
  &.-x {
    transform: rotateX($defaultRotateX + 0deg);
  }
  
  &.-y {
    transform: rotateY($defaultRotateY + 0deg);
  }
  
  &.-z {
    transform: rotateY($defaultRotateZ + 0deg);
  }
}
// Template *** END

Stupendo cubo che zomma quando clicchi nel main o nell’oggetto stesso.