CodePen Embed - Printing to Scale

mixin cuboid()
  .cuboid(class!=attributes.class)
    - let s = 0
    while s < 6
      .cuboid__side
      - s++
.scene
  .printer
    .printer__side.printer__side--left
      +cuboid()(class="cuboid--side")
    .printer__side.printer__side--right
      .cuboid.cuboid--side
        .cuboid__side
        .cuboid__side
        .cuboid__side
        .cuboid__side
          .light.progress-light
          .light.standby-light
          button.print-button
            .button
              +cuboid()(class="cuboid--button")
        .cuboid__side
        .cuboid__side

    .printer__tray.printer__tray--bottom
      +cuboid()(class="cuboid--tray")
    .printer__tray.printer__tray--top
      +cuboid()(class="cuboid--tray")
    .printer__top
      .cuboid.cuboid--top
        .cuboid__side
        .cuboid__side
        .cuboid__side
        .cuboid__side
          .screen
            .screen__preview
              img.screen__preview-img
        .cuboid__side
        .cuboid__side
    .printer__back
      +cuboid()(class="cuboid--back")
    .paper-stack.paper-stack--bottom
      +cuboid()(class="cuboid--paper")
    .paper-stack.paper-stack--top
      .cuboid.cuboid--paper
        .cuboid__side
          .paper
            .paper__flyer
        .cuboid__side
        .cuboid__side
        .cuboid__side
        .cuboid__side
        .cuboid__side
form.customer-form
  label(for="print") Print URL
  input#print(type='url' required placeholder="URL for Printing")
  input(type="submit" value="Print")

View Compiled

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap')

.cuboid
  width 100%
  height 100%
  position relative
  // 1 is the top and go top, back, bottom, front, right, left

  &__side:nth-of-type(1)
    background var(--shade-one)
    height calc(var(--thickness) * 1vmin)
    width 100%
    position absolute
    top 0
    transform translate(0, -50%) rotateX(90deg)

  &__side:nth-of-type(2)
    background var(--shade-two)
    height 100%
    width calc(var(--thickness) * 1vmin)
    position absolute
    top 50%
    right 0
    transform translate(50%, -50%) rotateY(90deg)

  &__side:nth-of-type(3)
    background var(--shade-three)
    width 100%
    height calc(var(--thickness) * 1vmin)
    position absolute
    bottom 0
    transform translate(0%, 50%) rotateX(90deg)

  &__side:nth-of-type(4)
    background var(--shade-four)
    height 100%
    width calc(var(--thickness) * 1vmin)
    position absolute
    left 0
    top 50%
    transform translate(-50%, -50%) rotateY(90deg)

  &__side:nth-of-type(5)
    background var(--shade-five)
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--thickness) * 0.5vmin))
    position absolute
    top 0
    left 0

  &__side:nth-of-type(6)
    background var(--shade-six)
    height 100%
    width 100%
    transform translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg)
    position absolute
    top 0
    left 0

:root
  --base-size 12
  --depth calc(var(--base-size) * 2.25)
  --height calc(var(--base-size) * 1vmin)
  --width calc(var(--base-size) * 1.4vmin)
  --base-hue 206
  --theme-hue 280
  --accent-hue 35
  --bg 'hsl(%s 40% 84%)' % var(--theme-hue)
  --shoot-speed 1.5
  --load-speed 2
  --print-speed 1
  // Colors
  --p-1 'hsl(%s, 30%, 90%)' % var(--base-hue)
  --p-2 'hsl(%s, 30%, 86%)' % var(--base-hue)
  --p-3 'hsl(%s, 30%, 82%)' % var(--base-hue)
  --p-4 'hsl(%s, 30%, 78%)' % var(--base-hue)
  --p-5 'hsl(%s, 30%, 72%)' % var(--base-hue)
  --p-6 'hsl(%s, 30%, 68%)' % var(--base-hue)
  --p-7 'hsl(%s, 30%, 64%)' % var(--base-hue)
  --p-8 'hsl(%s, 30%, 20%)' % var(--base-hue)
  --t-1 hsl(0, 0%, 40%)
  --t-2 hsl(0, 0%, 36%)
  --t-3 hsl(0, 0%, 32%)
  --t-4 hsl(0, 0%, 28%)
  --t-5 hsl(0, 0%, 24%)
  --g-1 'hsl(%s, 40%, 94%)' % var(--base-hue)
  --g-2 'hsl(%s, 40%, 90%)' % var(--base-hue)
  --g-3 'hsl(%s, 40%, 86%)' % var(--base-hue)
  --g-4 'hsl(%s, 40%, 80%)' % var(--base-hue)
  --g-5 'hsl(%s, 40%, 96%)' % var(--base-hue)
  --a-1 'hsl(%s, 10%, 65%)' % var(--accent-hue)
  --a-2 'hsl(%s, 10%, 60%)' % var(--accent-hue)
  --a-3 'hsl(%s, 10%, 55%)' % var(--accent-hue)
  --a-4 'hsl(%s, 10%, 50%)' % var(--accent-hue)
  --a-5 'hsl(%s, 10%, 45%)' % var(--accent-hue)
    
*
*:after
*:before
  box-sizing border-box
  transform-style preserve-3d
  touch-action none    

body
  min-height 100vh
  display grid
  place-items center
  background var(--bg)
  overflow hidden
  touch-action none

.light
  height calc(var(--height) * 0.1)
  width calc(var(--height) * 0.1)
  position absolute
  left 50%
  top 20%
  border-radius 0%
  border calc(var(--height) * 0.01) solid var(--p-8)

.standby-light
  background hsla(210, 80%, 40%, 1)
  transform translate(-50%, 0) translate(100%, 0)

.progress-light
  transform translate(-50%, 0) translate(-100%, 0)
  background 'hsla(%s, 80%, 50%)' % var(--progress-hue, 103)  

.printing
  --progress-hue 14  
  
.scene
  position fixed
  top 50%
  left 50%
  height var(--height)
  width var(--width)
  // background hsla(10 80% 70% 0.25)
  transform translate3d(-50%, -50%, 100vmin)
  transform translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg))


.printer
  height 100%
  width 100%
  position absolute
  left 50%

  & > *
    position absolute
    transition transform 0.2s

  &__top
    height 40%
    width 100%
    transform translate3d(0, calc((var(--exploded, 0) * 8) * -1vmin), 0)

  &__back
    height 60%
    width 50%
    bottom 0
    right 0

  &__side
    height 60%
    width 100%
    bottom 0

    &--right
      transform translate3d(0, 0, calc(var(--depth) * 0.375vmin))

    &--left
      transform translate3d(0, 0, calc(var(--depth) * -0.375vmin))

  &__tray
    height 10%
    width 100%

    &--bottom
      bottom 0
      right 50%

    &--top
      top 0
      right 0
      transform translate(52%, 0) rotate(-75deg)


.cuboid--top
  --thickness var(--depth)
  --shade-one linear-gradient(hsl(0, 0%, 16%), hsl(0, 0%, 16%)) 100% 50% / 14% 54% no-repeat,
        linear-gradient(var(--p-7), var(--p-7)) 40% 50% / 12% 32% no-repeat,
        linear-gradient(var(--p-7), var(--p-7)) 30% 50% / 2% 12% no-repeat,
        linear-gradient(var(--p-3), var(--p-3)) 0% 50% / 66% 50% no-repeat,
        var(--p-1)
  --shade-two var(--p-1)
  --shade-three var(--p-8)
  --shade-four linear-gradient(var(--p-4), var(--p-4)) 50% 0% / 50% 100% no-repeat, 
               var(--p-2)
  --shade-five var(--p-3)
  --shade-six var(--p-3)
    
  & > div
    &:nth-of-type(1)
      &:after
        content ''
        position absolute
        top 7%
        left 10%
        height calc(var(--depth) * 0.12vmin)
        width calc(var(--depth) * 0.12vmin)
        background url(https://assets.codepen.io/605876/avatar.png)
        background-size cover
        transform rotate(90deg)
        filter grayscale(0.5)
    &:nth-of-type(4)
      &:after
        content ''
        position absolute
        top 25%
        left 50%
        height 15%
        width 10%
        border-radius 25%
        background var(--p-6)
        transform translate3d(-50%, -50%, -1px)

.cuboid--back
  --thickness calc(var(--depth) * 0.5)
  --shade-one var(--p-1)
  --shade-two var(--t-1)
  --shade-three var(--p-2)
  --shade-four var(--t-5)
  --shade-five var(--p-3)
  --shade-six var(--p-3)    

.cuboid--tray
  --thickness calc(var(--depth) * 0.5)
  --shade-one linear-gradient(var(--t-2), var(--t-2)) 10% 50% / 5% 50% no-repeat, var(--t-1)
  --shade-two var(--t-1)
  --shade-three var(--t-2)
  --shade-four var(--t-2)
  --shade-five var(--t-3)
  --shade-six var(--t-3)    

.cuboid--side
  --thickness calc(var(--depth) * 0.25)
  --shade-one var(--p-1)
  --shade-two var(--p-1)
  --shade-three var(--p-2)
  --shade-four var(--p-2)
  --shade-five repeating-linear-gradient(var(--t-4) 0 25%, transparent 25% 50%) 90% 70% / 30% 20% no-repeat, var(--p-3)
  --shade-six repeating-linear-gradient(var(--t-4) 0 25%, transparent 25% 50%) 90% 70% / 30% 20% no-repeat, var(--p-3)

.printer__side--left > .cuboid 
  --shade-five var(--p-8)
.printer__side--right > .cuboid
  --shade-six var(--p-8)

.print-button
  position absolute
  top 60%
  left 50%
  transform translate(-50%, -50%)
  height 44px
  width 44px
  appearance none
  border 0
  background 0
  padding 0
  margin 0
  outline transparent
  cursor pointer

.button
  height calc(var(--height) * 0.14)
  width calc(var(--height) * 0.14)
  position absolute
  top 50%
  left 50%
  transform translate3d(-50%, -50%, 0)

.print-button:active .button
  transform translate3d(-50%, -50%, calc(var(--height) * 0.05))

.cuboid--button
  --thickness calc(var(--base-size) * 0.12)
  --shade-one var(--a-1)
  --shade-two var(--a-1)
  --shade-three var(--a-4)
  --shade-four var(--a-5)
  --shade-five var(--a-3)
  --shade-six var(--a-3)

.screen
  height calc(var(--height) * 0.25)
  width calc(var(--height) * 0.35)
  left 0
  top 50%
  background hsl(210, 40%, 84%)
  position absolute
  transform translate3d(28%, -50%, -1px)
  outline calc(var(--height) * 0.01) solid var(--p-8)

  &__preview
    height 100%
    width 100%
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%) rotateY(180deg)
    overflow hidden

    img
      height 100%
      width 100%
      background-size cover
      

.paper-stack
  width 90%
  bottom 0
  left -10%
  transform translate3d(0, 0, calc(var(--depth) * 1vmin))

  &--bottom
    height 10%

  &--top
    height 5%
    bottom 10%
    transform translate3d(0, 0, calc(var(--depth) * 1vmin)) rotateY(22deg)
      
      
.cuboid--paper
  --thickness calc(var(--depth) * 0.4)
  --shade-one var(--g-1)
  --shade-two var(--g-2)
  --shade-three var(--g-5)
  --shade-four var(--g-3)
  --shade-five var(--g-4)
  --shade-six var(--g-4)
    
.paper-stack--top .cuboid--paper .paper
  height 100%
  width 100%
  background transparent

  &__flyer
    position absolute
    height 100%
    width 100%
    top 0
    left 0
    background transparent
    overflow hidden

    &:after
      content ''
      position absolute
      height 100%
      width 100%
      background var(--g-1)
    
// Animations
.printing .paper-stack--top .cuboid--paper .paper
  animation transfer calc(var(--load-speed) * 0.5s) ease-in-out forwards
.printing .paper-stack--top .cuboid--paper .paper__flyer
  animation fly calc(var(--load-speed) * 0.5s) ease-in-out forwards
.printing .paper-stack--top .cuboid--paper .paper__flyer:after
  animation feed calc(var(--load-speed) * 0.5s) calc(var(--load-speed) * 0.5s) forwards

@keyframes transfer
  to
    transform translate(0, -270%) rotate(22deg)

@keyframes feed
  to
    transform translate(100%, 0)

@keyframes fly
  0%
    transform translate3d(0, 0, 0) rotateY(0deg) translate(0, 0)
  50%
    transform translate3d(140%, 0, calc(var(--height) * 1.2)) rotateY(-75deg) translate(180%, 0)
  100%
    transform translate3d(140%, 0, var(--height)) rotateY(-75deg) translate(0%, 0) rotate(-180deg)
    
.printed
  right 55%
  width calc(var(--width) * 0.9)
  height calc(var(--depth) * 0.4vmin)
  bottom 10%
  transform translate3d(0, -1px, 0)
  
  &__image
    height 100%
    width 100%
    object-fit cover

  &__spinner
    width calc(var(--width) * 0.9)
    height calc(var(--depth) * 0.4vmin)
    transform-origin 50% 0

  &__paper
    width calc(var(--width) * 0.9)
    height calc(var(--depth) * 0.4vmin)
    bottom 0
    transform translate(0, 50%) rotateX(90deg)
    clip-path inset(0 -20% 0 0)
    backface-visibility hidden

  &__paper-back
    width calc(var(--width) * 0.9)
    height calc(var(--depth) * 0.4vmin)
    bottom 0
    position absolute
    top 0
    left 0
    transform translate(0, 50%) rotateX(90deg) rotateY(180deg)
    backface-visibility hidden
    background var(--g-2)

  &__papiere
    background var(--g-1)
    position absolute
    height 100%
    width 100%
    transform translate(120%, 0)  
  
.printed
  animation shoot calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) ease-out forwards
.printed__spinner
  animation eject calc(var(--shoot-speed) * 1s) calc(((var(--load-speed) * 0.75) + var(--print-speed)) * 1s) ease-out forwards
.printed__papiere
  animation print calc(var(--print-speed) * 1s) calc(var(--load-speed) * 0.75s) forwards steps(5, start)
  
@keyframes fade
  0%, 80%
    opacity 1
  100%
    opacity 0
  
@keyframes shoot
  0%
    transform translate3d(0%, -1px, 0)
  100%
    transform translate3d(-300%, -1px, 0)

@keyframes eject
  15%
    transform rotate(0deg)
  50%, 100%
    transform rotate(360deg)

@keyframes print
  to
    transform translate(0, 0)  
    
.customer-form
  position fixed
  top calc(var(--height) + 50%)
  left 50%
  z-index 10
  display flex
  flex-direction column
  align-items center
  justify-content center
  transform translate3d(-50%, 0%, 400vmin)

  & > * + *
    margin-top 0.75rem

label
  position absolute
  width 1px
  height 1px
  padding 0
  margin -1px
  overflow hidden
  clip rect(0, 0, 0, 0)
  white-space nowrap
  border-width 0

[type="url"]
  padding 1rem 2rem
  font-size 1.25rem
  border '4px solid hsl(%s, 80%, 50%)' % var(--theme-hue)
  border-radius 1rem
  text-align center
  font-family 'Fredoka One', cursive
  outline transparent

[type="submit"]
  font-family 'Fredoka One', cursive
  outline transparent
  padding 1rem 2rem
  font-size 1.25rem
  color hsl(0, 0%, 100%)
  width 180px
  border-radius 1rem
  border '4px solid hsl(%s, 80%, 50%)' % var(--theme-hue)
  background 'hsl(%s, 80%, 50%)' % var(--theme-hue)
  transition background 0.1s, transform 0.1s
  cursor pointer


  &:hover
    background 'hsl(%s, 80%, 40%)' % var(--theme-hue)
    transform translate(0, -5%)

  &:active
    background 'hsl(%s, 80%, 20%)' % var(--theme-hue)
    transform translate(0, 5%)

  &[disabled]
    background 'hsl(%s, 80%, 70%)' % var(--theme-hue)
    border-color 'hsl(%s, 80%, 60%)' % var(--theme-hue)
    transform translate(0, 0)

View Compiled

import 'https://cdn.skypack.dev/regenerator-runtime'

const PRINTER = document.querySelector('.printer')

let printing = false

const PREVIEW = document.querySelector('img.screen__preview-img')
const SUBMIT = document.querySelector('[type="submit"]')
const URL_INPUT = document.querySelector('[type="url"]')
PREVIEW.addEventListener('load', e => {
  PRINTER.classList.add('printing')
  const PRINT = document.createElement('div')
  PRINT.className = 'printed'
  PRINT.innerHTML = `
    <div class="printed__spinner">
      <div class="printed__paper">
        <div class="printed__papiere">
          <img class="printed__image" src=${PREVIEW.src}/>
        </div>
      </div>
      <div class="printed__paper-back"></div>
    </div>
  `
  PRINTER.appendChild(PRINT)
  setTimeout(() => {
    printing = false
    SUBMIT.removeAttribute('disabled')
    PRINTER.classList.remove('printing')
  }, 4500)
})

const PROCESS = async () => {
  if (printing) return
  printing = true
  SUBMIT.disabled = true
  const res = await fetch(URL_INPUT.value)
  PREVIEW.src = res.url
  URL_INPUT.value = ''
}

const PRINT = e => {
  e.preventDefault()
  PROCESS()
}

const PRINT_FORM = document.querySelector('form')
PRINT_FORM.addEventListener('submit', PRINT)

View Compiled

This Pen is owned by SitePoint on CodePen. It is a fork of this Pen.

See more by @SitePoint on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.