<div class="rotating-tardis">

  <div class="tardis-light">

    <div class="front-light light-sides">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
      <div class="light-glow"></div>
    </div>
    
    <div class="back-light light-sides">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
      <div class="light-glow"></div>
    </div>
    
    <div class="left-light light-sides">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
      <div class="light-glow"></div>
    </div>
    
    <div class="right-light light-sides">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-light.svg">
      <div class="light-glow"></div>
    </div>
    
    <div class="top-light light-sides"></div>
    <div class="bottom-light light-sides"></div>

  </div> <!-- closes tardis-light -->

  <div class="tardis-sides-all">

    <div class="front-side tardis-sides-rectangle">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
    </div>
    
    <div class="back-side tardis-sides-rectangle">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
    </div>
    
    <div class="left-side tardis-sides-rectangle">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
    </div>
    
    <div class="right-side tardis-sides-rectangle">
      <img src="https://cdn.rawgit.com/AnwenW/spinning-tardis/55788e43/images/tardis-body.svg">
    </div>
    
    <div class="top-side tardis-sides-square"></div>
    <div class="bottom-side tardis-sides-square"></div>

  </div> <!-- closes tardis-sides-all -->

</div> <!-- closes rotating-tardis -->


@keyframes flying-tardis {
  0% {
      transform: scale(0) rotate(-20deg);
      position: relative;
      left: 20vw;
  }
  50% {
      transform: scale(1) rotate(0deg);
      position: relative;
      left: 30vw;
  }
  100% {
      transform: scale(0) rotate(25deg);
      position: relative;
      left: 50vw;
  }
}

@keyframes rotate-tardis {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes light-flash {
  0% {
    box-shadow: 0 0 0px yellow;
    opacity: 0.2;
  }
  50% {
    box-shadow: 0 0 50px yellow;
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0px yellow;
    opacity: 0.2;
  }
}

body {
  background: rgb(10,20,60);
/*   background: radial-gradient(circle, rgba(112,50,50,1) 0%, rgba(0,19,52,1) 100%);
  background-attachment: fixed; */
  
  background-image:
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 2em),
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 1em),
    radial-gradient(white, rgba(255, 255, 255, .05) .2em, transparent 5em),
    radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .03) .2em, transparent 4em),
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 2em),
    radial-gradient(#eee, rgba(255, 255, 255, .02) .1em, transparent 1em),
    radial-gradient(#eee, rgba(255, 255, 255, .05) .2em, transparent 5em),
    radial-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .03) .2em, transparent 4em);
  background-size: 11em 13em, 9.7em 9.7em, 94.9em 94.9em, 16.3em 16.7em,
    9em 7em, 11.3em 11.3em, 73.9em 73.9em, 17.7em 17.9em;
  background-position: 0 0, -4.3em -6.7em, -1.3em -2.7em, -7em -89em,
    11em 11em, -1.3em -2.7em, -4.3em -6.7em, -17em -9em;
}

.rotating-tardis {
  width: 100px;
  height: 100px;
  perspective: 600px;
  margin-left: 20vw;
  top: 10vh;
  animation: flying-tardis 7s linear infinite;
}
.tardis-sides-all {
  width: 100px;
  animation: rotate-tardis 7s linear infinite;
  transform-style: preserve-3d;
  margin-top: 100px;
}
.tardis-sides-rectangle {
  position: absolute;
  width: 100px;
  height: 200px;
}
.tardis-sides-square {
  position: absolute;
  width: 100px;
  height: 100px;
}
.front-side {
  transform: translateZ(50px);
}
.back-side {
  transform: rotateY(180deg) translateZ(50px);
}
.left-side {
  transform: rotateY(-90deg) translateX(-50px);
  transform-origin: left;
}
.right-side {
  transform: rotateY(90deg) translateX(50px);
  transform-origin: right;
}
.top-side {
  transform: rotateX(-90deg) translateY(-50px);
  transform-origin: top;
  background: #215785;
}
.bottom-side {
  transform: rotateX(90deg) translateY(50px);
  transform-origin: bottom;
  background: #215785;
}

.tardis-light {
  animation: rotate-tardis 7s linear infinite;
  transform-style: preserve-3d;
}
.light-sides {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -29px;
  left: 40px;
}
.light-glow {
  position: absolute;
  width: 16px;
  height: 20px;
  top: 4px;
  left: 2px;
  background: yellow;
  animation: light-flash 0.6s linear infinite;
}
.front-light {
  transform: translateZ(10px);
}
.back-light {
  transform: rotateY(180deg) translateZ(10px);
}
.left-light {
  transform: rotateY(-90deg) translateX(-10px);
  transform-origin: left;
}
.right-light {
  transform: rotateY(90deg) translateX(10px);
  transform-origin: right;
}
.top-light {
  transform: rotateX(-90deg) translateY(-10px);
  transform-origin: top;
  background: #215785;
}
.bottom-light {
  transform: rotateX(90deg) translateY(10px);
  transform-origin: bottom;
  background: #215785;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.