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
.printed
.printed__spinner
.printed__paper
.printed__papiere
.printed__paper-back@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
--accent-hue 35
--bg 'hsl(%s 40% 54%)' % 210
--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)
.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-2)
--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)
.printer__top
.printer__back
.printer__tray
.printer__side
.cuboid__side
opacity 0.25
// Animations
.paper-stack--top .cuboid--paper .paper
animation transfer calc(var(--load-speed) * 0.5s) ease-in-out forwards
.paper-stack--top .cuboid--paper .paper__flyer
animation fly calc(var(--load-speed) * 0.5s) ease-in-out forwards
.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)
.paper
background hsla(10, 80%, 50%, 0.75) !important
.paper__flyer
background hsla(130, 80%, 50%, 0.75) !important
.printed
right 55%
width calc(var(--width) * 0.9)
height calc(var(--depth) * 0.4vmin)
bottom 10%
transform translate3d(0, -1px, 0)
background hsla(320, 80%, 50%, 0.75)
&__spinner
width calc(var(--width) * 0.9)
height calc(var(--depth) * 0.4vmin)
transform-origin 50% 0
background hsla(280, 80%, 50%, 0.75)
&__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
background hsla(200, 80%, 50%, 0.75)
&__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) 
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.