My "Soon to be Standing" Desk

index.haml

.container
  .rotate
    .human
      %img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/human.png"}
    .desktop
      %img{:src => "https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/desktop.png"}
    .table-top
      - (1..4).each do |i|
        %div{:class => "leg leg-#{i}"}
          .f.plane
          .l.plane
          .r.plane
          .b.plane
        %div{:class => "top"}
          .t
          .f.plane
          .l.plane
          .r.plane
          .b.plane
    .table-center
      - (1..4).each do |i|
        %div{:class => "leg leg-#{i}"}
          .f.plane
          .l.plane
          .r.plane
          .b.plane
        %div{:class => "top"}
          .t
          .f.plane
          .l.plane
          .r.plane
          .b.plane        
    .table-base
      - (1..4).each do |i|
        %div{:class => "leg leg-#{i}"}
          .f.plane
          .l.plane
          .r.plane
          .b.plane
        %div{:class => "top"}
          .t
          .f.plane
          .l.plane
          .r.plane
          .b.plane

My "Soon to be Standing" Desk.markdown

My "Soon to be Standing" Desk

My desk to spec rendered with HTML and CSS. The base desk already exists, so I am taking the modular approach and adding a free-moving keyboard stand and an eye-level platform.

A Pen by Jake Albaugh on CodePen.

License.

style.sass

$inch: 8px // change this for scale
$c-base: #AA7339
$c-dark: transparentize(darken($c-base, 4%),0.1)
$c-light: transparentize($c-base,0.1)
$anim-dur: 12s
$twoby-2: 1.25 * $inch
$twoby-4: 3.5 * $inch

=keyframes($animationName) 
  @keyframes #{$animationName}
    @content

=table-container($width, $height)
  position: absolute
  width: $width
  height: $height
  perspective: 3000px
  left: 50%
  top: 50%
  transform: translate(-50%, -50%)
    

=table($width, $height, $depth, $top, $left, $z)
  position: absolute
  width: $width
  height: $height
  top: $top
  left: $left
  transform-style: preserve-3d
  transform-origin: 50% 50%
  transform: translateZ($z)

  .leg
    position: absolute
    height: 100%
    width: $twoby-4
    transform-style: preserve-3d
    transform-origin: 50% 50%
    backface-visibility: hidden

    .plane
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 0
      transform-style: preserve-3d
      transform-origin: 50% 50%
      backface-visibility: hidden
    .f
      background: $c-dark
      transform: rotateY(0deg) translate3d(0,0,$twoby-4/2)
    .b
      background: $c-dark
      transform: rotateY(180deg) translate3d(0,0,$twoby-4/2)
    .r
      background: $c-light
      transform: rotateY(90deg) translate3d(0,0,$twoby-4/2)
    .l
      background: $c-light
      transform: rotateY(-90deg) translate3d(0,0,$twoby-4/2)
  .leg-1, .leg-2
    left: $twoby-2
  .leg-3, .leg-4
    right: $twoby-2
  .leg-1, .leg-3
    transform: translate3d(0,0,$depth/2 - $twoby-4)
  .leg-2, .leg-4
    transform: translate3d(0,0,$depth/-2 + $twoby-4)

  .top
    position: absolute
    width: $width
    height: $twoby-4
    transform-style: preserve-3d
    transform-origin: 50% 50%
    backface-visibility: hidden
    .t
      transform-origin: 50% 50%
      position: absolute
      height: $depth
      width: $width
      top: $depth * -0.5
      background-color: $c-dark
      transform: rotateX(90deg) translate3d(0,0,1px)
    .plane
      position: absolute
      top: 0
      bottom: 0
      transform-style: preserve-3d
      transform-origin: 50% 50%

    .f, .b
      width: $width
      background-color: $c-light
    .l, .r
      width: $depth
      background-color: $c-dark
    .f
      transform: rotateY(0deg) translate3d(0,0,$depth/2)
    .b
      transform: rotateY(180deg) translate3d(0,0,$depth/2)
    .r
      transform: rotateY(90deg) translate3d(0,0,$width - $depth/2)
    .l
      transform: rotateY(-90deg)  translate3d(0,0,$depth/2)


  .plane, .t
    box-shadow: 0px 0px 0px 1px darken($c-base,10%)
      
  .leg .l, .leg .r
    &::before 
      content: ''
      position: absolute
      top: 0
      bottom: 0
      left: 50%
      border-right: 1px solid darken($c-base,20%)

        
=human($height, $top, $z)
  height: $height
  position: absolute
  top: $top
  left: 50%
  transform: translateX(-50%) translateZ($z)
  transform-style: preserve-3d
  transform-origin: 50% 50%
  opacity: 0.5
    
  img
    height: 6 * 12 * $inch
    
=desktop($width, $top, $z)
  width: $width
  height: auto
  position: absolute
  top: $top
  left: 50%
  transform: translateX(-50%) translateZ($z)
  transform-style: preserve-3d
  transform-origin: 50% 50%
  opacity: 0.5
    
  img
    height: auto
    width: 100%


// table top
$t1w: 72*$inch
$t1h: 24*$inch
$t1d: 12*$inch
$t1t: 0
$t1l: 0
$t1z: ((24 * $inch) - $t1d) / -2
// table center
$t2w: 24*$inch
$t2h: 16*$inch
$t2d: 16*$inch
$t2t: $t1h - $t2h - 2px
$t2l: ((72 - 24) / 2)*$inch
$t2z: ((24 * $inch) - $t2d) / 2
// table base
$t3w: 72*$inch
$t3h: 30*$inch
$t3d: 24*$inch
$t3t: $t1h + 2px
$t3l: 0
$t3z: 0
// human
$hh: 6 * 12 * $inch
$ht: ($hh - (54* $inch)) * -1
$hz: $t3d
// desktop
$dratio: 140 / 480
$dw: 56 * $inch
$dh: $dw * $dratio
$dt: $dh * -1
$dz: $t3d / -2 + 4px

.container
  +table-container($t3w, ($t1h + $t3h))
  padding-top: $dh
  
  .table-top
    z-index: 3
    +table($t1w,$t1h,$t1d,$t1t,$t1l,$t1z)
    

  .table-center
    z-index: 3
    +table($t2w,$t2h,$t2d,$t2t,$t2l,$t2z)
    
  .table-base
    z-index: 1
    +table($t3w,$t3h,$t3d,$t3t,$t3l,$t3z)
    
  .human
    +human($hh,$ht,$hz)

  .desktop
    +desktop($dw,$dt,$dz)
    
  .rotate
    position: absolute
    width: $t3w
    transform-style: preserve-3d
    transform-origin: 50% 50%
    +keyframes(rotate)
      0%
        transform: rotateY(0deg) rotateX(0)
      15%
        transform: rotateY(0deg) rotateX(-20deg)
      30%
        transform: rotateY(0deg) rotateX(0)
      100%
        transform: rotateY(-360deg) rotateX(0)

    animation: rotate $anim-dur infinite linear    

    
body
  background-color: #1f1f1f