//- Original picture stolen from this https://www.behance.net/gallery/21404807/INTERSTELLAR

- var n = 0;

html
  body
    .caption
      span Christopher Nolan
      a(href="https://www.behance.net/gallery/21404807/INTERSTELLAR" target="blank") Interstellar
      p Mankind was born on Earth </br> It was never meant to die here.
    .cube
      .side.top
      .side.left
      .side.right
      .side.bottom
        .clock
          .numblock
            span 12
            span 3
            span 6
            span 9
          .pin
            #hr
            #hr__light
            #min
            #min__light
            #sec
            #sec__light
          .hDiv
            - for (var n = 1; n <= 12; n++)
              .hSerif
          .mDiv
            - for (var n = 1; n <= 60; n++)
              .mSerif
View Compiled
@import url(https://fonts.googleapis.com/css?family=Raleway:700,100,400)

@mixin centerer
  position: absolute
  bootom: 200px
  left: 50%
  transform: translateX(-50%)
  
@mixin centererSerif
  position: absolute
  bootom: 200px
  top: 20px
  left: 50%
  transform: translateX(-50%)
  
$w: 400px
$h: 400px

html
  box-sizing: border-box
*, *:before, *:after
  box-sizing: inherit

body
  overflow: hidden 
  font-family: 'Raleway', sans-serif
  background-color: #090909
  color: white
  text-transform: uppercase
  
span
  font-size: 14px
  font-weight: 100
  
a
  display: block
  font-size: 28px
  font-weight: 800
  color: white
  text-decoration: none
  margin: 6px 0 14px
  &:hover
    text-decoration: underline

p
  opacity: 0.5
  line-height: 14px
  font-size: 10px
  font-weight: 100
 
.caption
  position: absolute
  bottom: 30px
  right: 40px

.cube
  @include centerer
  width: $w
  height: $h
  bottom: 30px
  transform-style: preserve-3d
  transform: translateX(-50%) rotateX(60deg) rotateZ(30deg)

.numblock
  span
    position: absolute
    font-weight: 400
    font-size: 19px
    opacity: 0.4
    &:nth-child(1)
      left: 190px
    &:nth-child(2)
      top: 194px
      right: 0
    &:nth-child(3)
      left: 194px
      bottom: 0
    &:nth-child(4)
      top: 192px
      left: 0
  
.clock
  position: absolute
  width: $w
  height: $h
  border-radius: 100%
  background-color: rgba(255, 255, 255, .0)
  
.pin
  z-index: 4
  width: 20px
  height: 20px
  margin: 186px auto
  border-radius: 100%
  background-color: white

#sec, #min, #hr
  position: absolute
  transform: rotate(0deg)

#sec
  z-index: 3
  width: 4px
  height: 170px
  margin: -26px 8px
  transform-origin: 2px 36px
  background-color: white
  &__light
    position: absolute
    height: 1600px
    width: 170px
    margin: -1600px 0 0 -38px
    transform-origin: 38px bottom
    opacity: 1.8
    background-image: url(http://savepic.ru/10070628.png)
    background-position: 0 0
    background-size: 100% 100%
    transform: translateZ(-10px) rotateX(-90deg) rotateY(0deg)
    animation: secMove 380s infinite linear

@keyframes secMove
  50%
    background-position: 1200px 0

#min
  z-index: 1
  width: 6px
  height: 140px
  margin: 0
  margin: -100px 7px
  transform-origin: 3px 110px
  background-color: white
  &__light
    position: absolute
    height: 1600px
    width: 140px
    margin: -1600px 0 0 -110px
    transform-origin: 110px bottom
    background-position: 0 0
    background-image: url(http://savepic.ru/10070628.png)
    background-size: 100% 100%
    transform: translateZ(-10px) translateX(-120px) rotateX(-90deg) rotateY(0deg)
    animation: minMove 120s infinite linear

@keyframes minMove
  50%
    background-position: 600px 0
    
#hr
  z-index: 2
  width: 8px
  height: 90px
  margin: -66px 6px
  transform-origin: 4px 76px
  background-color: white
  transform: rotate(40deg)
  &__light
    position: absolute
    opacity: 0.7
    height: 1600px
    width: 90px
    margin: -1600px 0 0 -90px
    transform-origin: 90px bottom
    background-position: 0 0
    background-image: url(http://savepic.ru/10070628.png)
    background-size: 100% 100%
    transform: translateZ(-10px) translateX(-120px) rotateX(-90deg) rotateY(0deg)
    animation: hrMove 120s infinite linear

@keyframes hrMove
  50%
    background-position: 600px 0
    
  
.hSerif
  @include centererSerif
  width: 6px
  height: 20px
  background: rgba(255, 255, 255, 1)
  transform-origin: 2px 170px
  @for $i from 0 through 12
    &:nth-child(#{$i+1})
      transform: translate(-50%, 50%) rotate(30deg * $i)

.mSerif
  @include centererSerif
  width: 2px
  height: 10px
  background: rgba(255, 255, 255, .3)
  transform-origin: 0 170px
  @for $i from 0 through 60
    &:nth-child(#{$i+1})
      transform: translate(-50%, 100%) rotate(6deg * $i)
View Compiled
console.clear()

clockSeconds = document.getElementById('sec')
clockMinutes = document.getElementById('min')
clockHours = document.getElementById('hr')

arrowSeconds = document.getElementById('sec__light')
arrowMinutes = document.getElementById('min__light')
arrowHours = document.getElementById('hr__light')

getTime = ->
  date = new Date
  seconds = date.getSeconds()
  minutes = date.getMinutes()
  hours = date.getHours()
  degSeconds = seconds * 360 / 60
  degMinutes = (minutes + seconds / 60) * 360 / 60
  degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12
  clockSeconds.setAttribute 'style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);'
  clockMinutes.setAttribute 'style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);'
  clockHours.setAttribute 'style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);'
  arrowSeconds.setAttribute 'style', '-webkit-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degSeconds - 90) + 'deg); -moz-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degSeconds - 90) + 'deg); -ms-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degSeconds - 90) + 'deg); -o-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degSeconds - 90) + 'deg); transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degSeconds - 90) + 'deg);'
  arrowMinutes.setAttribute 'style', '-webkit-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degMinutes - 90) + 'deg); -moz-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degMinutes - 90) + 'deg); -ms-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degMinutes - 90) + 'deg); -o-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degMinutes - 90) + 'deg); transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degMinutes - 90) + 'deg);'
  arrowHours.setAttribute 'style', '-webkit-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degHours - 90) + 'deg); -moz-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degHours - 90) + 'deg); -ms-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degHours - 90) + 'deg); -o-transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degHours - 90) + 'deg); transform: translateZ(-10px) rotateX(-90deg) rotateY(' + (-degHours - 90) + 'deg);'

$ ->
  setInterval getTime, 1000
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js