each mockup in [{title: 'Just the model', screen: ''}, {title: 'Model with GIF', screen: 'url(https://i.imgur.com/dPpgXq8.gif)'}, {screen: '', animate: 'screen', title: 'With custom hover animation'}]
  h1 #{mockup.title}
  .tridiv-wrap
    .tridiv(for='i in [0, 1, 2]')
      .scene(data-tilt='' data-tilt-max='35' data-animate=`${mockup.animate}`)
        .shape.cuboid-1.cub-1
          .face.ft
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.133);')
          .face.bk
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.133);')
          .face.rt
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.133);')
          .face.lt
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.133);')
          .face.bm
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.133);')
          .face.tp
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.133);')
          .cr.cr-0
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.06);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(255, 255, 255, 0.08);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(255, 255, 255, 0.047);')
          .cr.cr-1
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.098);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.247);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.392);')
          .cr.cr-2
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.54);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.68);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.647);')
          .cr.cr-3
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.5);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.353);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.208);')
        .shape.cuboid-3.cub-3
          .face.ft
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.bk
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.rt
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.lt
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.bm(style=`background: ${mockup.screen}`)
          .face.tp
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
        .shape.cuboid-2.cub-2
          .face.ft
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.bk
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.rt
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.lt
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.bm
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .face.tp
            .photon-shader(style='background-color: rgba(0, 0, 0, 0.34);')
          .cr.cr-0
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.28);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.157);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.055);')
          .cr.cr-1
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.02);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.086);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.2);')
          .cr.cr-2
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.32);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.443);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.545);')
          .cr.cr-3
            .face.side.s0
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.58);')
            .face.side.s1
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.514);')
            .face.side.s2
              .photon-shader(style='background-color: rgba(0, 0, 0, 0.4);')

script(src='https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js')
View Compiled
/* Required styles for Tilt.js */
body .tridiv .scene {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
  will-change: transform;
}

/* Custom screen popout animation */
.cuboid-3 .face.bm {transition: transform 1s ease 0.5s;}
[data-animate="screen"] .cuboid-3 .face.bm:hover {transform: rotateX(-120deg) translate3d(0, -50%, 300px);}

/* 🤷‍ Demo Styles: Ignore this 🤷‍ */
* {box-sizing: border box;}
html {text-align: center}
h1 {margin-bottom: 0}

.tridiv-wrap {
  display: block;
  text-decoration: none;
  box-shadow: none !important;
  width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

/* 🤷‍ TRIDIV Styles: Copied from TriDiv.com 🤷‍ */
/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ 
.tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 100%;
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, 6em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:15em;
  height:0.5em;
  margin:-0.25em 0 0 -7.5em;
}
.cub-1 .ft {
  transform:translateZ(6.5em);
}
.cub-1 .bk {
  transform:translateZ(-6.5em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:13em;
  height:0.5em;
}
.cub-1 .tp, .cub-1 .bm {
  width:15em;
  height:13em;
}
.cub-1 .face {
  background-color:#FFFFFF;
}
.cub-1 .ft {
  width:14em;
  margin-left:0.5em;
}
.cub-1 .bk {
  width:14em;
  margin-left:-0.5em;
}
.cub-1 .rt, .cub-1 .lt {
  width:12em;
}
.cub-1 .tp, .cub-1 .bm, .cub-1 .tp .photon-shader, .cub-1 .bm .photon-shader {
  border-radius:0.5em;
}
.cub-1 .cr {
  width:0.5em;
  left:0.25em;
}
.cub-1 .cr-0 {
  transform: translate3D(14em, 0, 6em);
}
.cub-1 .cr-1 {
  transform: translate3D(14em, 0, -6em);
}
.cub-1 .cr-2 {
  transform: translate3D(0, 0, -6em);
}
.cub-1 .cr-3 {
  transform: translate3D(0, 0, 6em);
}
.cub-1 .cr-0 .s0 {
  transform: rotateY(15deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-0 .s1 {
  transform: rotateY(45deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-0 .s2 {
  transform: rotateY(75deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-1 .s0 {
  transform: rotateY(105deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-1 .s1 {
  transform: rotateY(135deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-1 .s2 {
  transform: rotateY(165deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-2 .s0 {
  transform: rotateY(195deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-2 .s1 {
  transform: rotateY(225deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-2 .s2 {
  transform: rotateY(255deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-3 .s0 {
  transform: rotateY(285deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-3 .s1 {
  transform: rotateY(315deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .cr-3 .s2 {
  transform: rotateY(345deg) translate3D(-50%, 0, 0.475em);
}
.cub-1 .side {
  width:0.2929491924311227em;
}
/* .cub-3 styles */
.cub-3 {
  transform:translate3D(0em, 0.51em, -9.2em) rotateX(120deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:13em;
  height:.5em;
  margin:-0.25em 0 0 -6.5em;
}
.cub-3 .ft {
  transform:translateZ(5.5em);
}
.cub-3 .bk {
  transform:translateZ(-5.5em) rotateY(180deg);
}
.cub-3 .rt, .cub-3 .lt {
  width:11em;
  height:.5em;
}
.cub-3 .tp, .cub-3 .bm {
  width:13em;
  height:11em;
}
.cub-3 .face {
  background-color:#f0f;
}
/* .cub-2 styles */
.cub-2 {
  transform:translate3D(0em, 0.5em, -9.5em) rotateX(120deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:15em;
  height:0.5em;
  margin:-0.25em 0 0 -7.5em;
}
.cub-2 .ft {
  transform:translateZ(6.5em);
}
.cub-2 .bk {
  transform:translateZ(-6.5em) rotateY(180deg);
}
.cub-2 .rt, .cub-2 .lt {
  width:13em;
  height:0.5em;
}
.cub-2 .tp, .cub-2 .bm {
  width:15em;
  height:13em;
}
.cub-2 .face {
  background-color:#FFFFFF;
}
.cub-2 .ft {
  width:14em;
  margin-left:0.5em;
}
.cub-2 .bk {
  width:14em;
  margin-left:-0.5em;
}
.cub-2 .rt, .cub-2 .lt {
  width:12em;
}
.cub-2 .tp, .cub-2 .bm, .cub-2 .tp .photon-shader, .cub-2 .bm .photon-shader {
  border-radius:0.5em;
}
.cub-2 .cr {
  width:0.5em;
  left:0.25em;
}
.cub-2 .cr-0 {
  transform: translate3D(14em, 0, 6em);
}
.cub-2 .cr-1 {
  transform: translate3D(14em, 0, -6em);
}
.cub-2 .cr-2 {
  transform: translate3D(0, 0, -6em);
}
.cub-2 .cr-3 {
  transform: translate3D(0, 0, 6em);
}
.cub-2 .cr-0 .s0 {
  transform: rotateY(15deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-0 .s1 {
  transform: rotateY(45deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-0 .s2 {
  transform: rotateY(75deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-1 .s0 {
  transform: rotateY(105deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-1 .s1 {
  transform: rotateY(135deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-1 .s2 {
  transform: rotateY(165deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-2 .s0 {
  transform: rotateY(195deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-2 .s1 {
  transform: rotateY(225deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-2 .s2 {
  transform: rotateY(255deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-3 .s0 {
  transform: rotateY(285deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-3 .s1 {
  transform: rotateY(315deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .cr-3 .s2 {
  transform: rotateY(345deg) translate3D(-50%, 0, 0.475em);
}
.cub-2 .side {
  width:0.2929491924311227em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.