{"id":2257,"date":"2018-03-23T22:11:24","date_gmt":"2018-03-23T22:11:24","guid":{"rendered":"http:\/\/thingography.com\/?p=2257"},"modified":"2019-02-17T16:05:01","modified_gmt":"2019-02-17T16:05:01","slug":"css-tardis","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-tardis\/","title":{"rendered":"Doctor Who &#8211; Tardis CSS Animation"},"content":{"rendered":"<style>.ani-box {width:100%; height:100%; margin:0; padding:0;}<\/style>\n<div class=\"ani-box\">\n<div id=\"bg\"> <img decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/spiral-26.jpg\" alt=\"Spiral\" \/><\/div>\n<p><!-- Added for spinning background --><\/p>\n<div class=\"perspective\">\n<div class=\"tardis-wrap\" id=\"fly\">\n<div class=\"tardis\">\n          <!-- start of side --><\/p>\n<div class=\"side\">\n<div class=\"top-sign\">\n<div class=\"text\">\n                <span class=\"left\">POLICE<\/span><br \/>\n                <span class=\"tiny\">PUBLIC CALL<\/span><br \/>\n                <span class=\"right\">BOX<\/span>\n              <\/div>\n<\/p><\/div>\n<div class=\"door-frame\">\n<div class=\"door door-left\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"sign\"><\/div>\n<div class=\"window\"><img decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/sign.jpg\" style=\"position: absolute; top: 77px; left: 0;\"><\/p>\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"door door-right\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"handle\"><\/div>\n<div class=\"lock\"><\/div>\n<p><img decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/st-john.png\" class=\"st-john\"><\/p>\n<div class=\"window\"><img decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/tb2.jpg\" class=\"baker\"><\/p>\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- end of side --><\/p>\n<p>          <!-- start of side --><\/p>\n<div class=\"side\">\n<div class=\"top-sign\">\n<div class=\"text\">\n                <span class=\"left\">POLICE<\/span><br \/>\n                <span class=\"tiny\">PUBLIC CALL<\/span><br \/>\n                <span class=\"right\">BOX<\/span>\n              <\/div>\n<\/p><\/div>\n<div class=\"door-frame\">\n<div class=\"door door-left\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"window\">\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"door door-right\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"window\">\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- end of side --><\/p>\n<p>          <!-- start of side --><\/p>\n<div class=\"side\">\n<div class=\"top-sign\">\n<div class=\"text\">\n                <span class=\"left\">POLICE<\/span><br \/>\n                <span class=\"tiny\">PUBLIC CALL<\/span><br \/>\n                <span class=\"right\">BOX<\/span>\n              <\/div>\n<\/p><\/div>\n<div class=\"door-frame\">\n<div class=\"door door-left\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"window\">\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"door door-right\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"window\"><img decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/jw.jpg\" class=\"whittaker\"><\/p>\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- end of side --><\/p>\n<p>          <!-- start of side --><\/p>\n<div class=\"side\">\n<div class=\"top-sign\">\n<div class=\"text\">\n                <span class=\"left\">POLICE<\/span><br \/>\n                <span class=\"tiny\">PUBLIC CALL<\/span><br \/>\n                <span class=\"right\">BOX<\/span>\n              <\/div>\n<\/p><\/div>\n<div class=\"door-frame\">\n<div class=\"door door-left\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"window\">\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"door door-right\">\n<div class=\"door-inset\"><\/div>\n<div class=\"door-inset b\"><\/div>\n<div class=\"door-inset c\"><\/div>\n<div class=\"window\">\n<div class=\"pane a\"><\/div>\n<div class=\"pane b\"><\/div>\n<div class=\"pane c\"><\/div>\n<div class=\"pane d\"><\/div>\n<div class=\"pane e\"><\/div>\n<div class=\"pane f\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- end of side --><\/p>\n<div class=\"roof\"><\/div>\n<div class=\"roof-top\">\n<div class=\"roof-panel a\"><\/div>\n<div class=\"roof-panel b\"><\/div>\n<div class=\"roof-panel c\"><\/div>\n<div class=\"roof-panel d\"><\/div>\n<div class=\"top-lid\"><\/div>\n<\/p><\/div>\n<div class=\"light\">\n<div class=\"light-panel a\">\n<div class=\"bottom\"><\/div>\n<div class=\"top\"><\/div>\n<\/div>\n<div class=\"light-panel b\">\n<div class=\"bottom\"><\/div>\n<div class=\"top\"><\/div>\n<\/div>\n<div class=\"light-panel c\">\n<div class=\"bottom\"><\/div>\n<div class=\"top\"><\/div>\n<\/div>\n<div class=\"light-panel d\">\n<div class=\"bottom\"><\/div>\n<div class=\"top\"><\/div>\n<\/div>\n<div class=\"light-lid\"><\/div>\n<\/p><\/div>\n<p>          <!-- start of floor --><\/p>\n<div class=\"floor\">\n<div class=\"floor-panel a\"><\/div>\n<div class=\"floor-panel b\"><\/div>\n<div class=\"floor-panel c\"><\/div>\n<div class=\"floor-panel d\"><\/div>\n<div class=\"floor-lid\"><\/div>\n<\/p><\/div>\n<p>          <!-- end of floor --><\/p><\/div>\n<p>  <!-- TARDIS -->\n     <\/div>\n<p>  <!-- Wrap -->\n  <\/div>\n<p>  <!-- Perspective --><\/p>\n<p>  <audio id=\"mp3\" loop=\"loop\" autoplay=\"autoplay\" controls=\"controls\"><!-- Will play MP3 in modern browser --><source src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/tardis.mp3\" type=\"audio\/mpeg\"\/><source src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/2019\/02\/tardis.ogg\" type=\"audio\/ogg\" \/>Your browser does not support the audio element.<\/audio><\/p>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<div class=\"below-ani\">\nThe TARDIS from Doctor Who in CSS motion<\/p>\n<p>\nThis modified Pure CSS version of the Tardis (originally by <a href=\"https:\/\/codepen.io\/Gerwinnz\/pen\/hjxzl\/\" title=\"Go to CodePen.io\">Gerwin van Royen<\/a>) was much nicer and cleaner than my original Tardis, so it was replaced. A few JPGs and a PNG were added to for more WHO atmosphere. Please note that the Tardis does not function well in Internet Explorer.\n<\/p>\n<\/div>\n<style>\n<!-- START -->\n.left{\n  float: left;\n  padding-left: 18px;\n}\n.right{\n  float: right;\n  padding-right: 10px;\nmargin-top: -45px;\n}\n.my-wrapper {\nwidth: 100%;\nheight: 800px;\nposition: relative;\noverflow:hidden;\nmargin:2em auto;\n}\n.perspective{\n  perspective: 1200px;\n  -webkit-perspective: 1200px;\n}\n.tardis-wrap{\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform : translateZ(-300px);\n  -webkit-transform : translateZ(-300px);\n}\n.tardis{\n  position: relative;\n  width: 200px;\n  height: 200px;\n  margin: 160px auto;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform-origin: 50% 50%;\n  -webkit-transform-origin: 50% 50%;\n  transform: rotateX(-20deg) rotateY(-30deg);\n  -webkit-transform: rotateX(-20deg) rotateY(-30deg);\n  animation-name: spin;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n}\n@keyframes spin{\n  from{\n    transform: rotateX(-20deg) rotateY(0deg);\n  }\n  to{\n    transform: rotateX(-20deg) rotateY(-360deg);\n  }\n}\n\/* Begin details *\/\n.tardis .side{\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 360px;\n  background-color: #3f577d;\n  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  z-index: 1;\n}\n.side:nth-of-type(1){\n  transform : translateZ(100px);\n  -webkit-transform : translateZ(100px);\n}\n.side:nth-of-type(2){\n  transform : rotateY(90deg) translateZ(100px);\n  -webkit-transform : rotateY(90deg) translateZ(100px);\n}\n.side:nth-of-type(3){\n  transform : rotateY(180deg) translateZ(100px);\n  -webkit-transform : rotateY(180deg) translateZ(100px);\n}\n.side:nth-of-type(4){\n  transform : rotateY(-90deg) translateZ(100px);\n  -webkit-transform : rotateY(-90deg) translateZ(100px);\n}\n.tardis .roof{\n  position: absolute;\n  width: 200px;\n  height: 200px;\n  background-color: #3f577d;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform : rotateX(-90deg) translateZ(-100px);\n  -webkit-transform : rotateX(-90deg) translateZ(-100px);\n  z-index: 2;\n}\n\/* The top roof box *\/\n.roof-top{\n  position: absolute;\n  left: 30px;\n  width: 140px;\n  height: 140px;\n  z-index: 2; \n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n}\n.top-lid{\n  width: 140px;\n  height: 140px;\n  background-color: #355683;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform : rotateX(-90deg) translateZ(-89px);\n  -webkit-transform : rotateX(-90deg) translateZ(-89px);\n}\n.roof-panel{\n  position: absolute;\n  width: 140px;\n  height: 20px;\n  background-color: #445d84;\n  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;\n  top: -20px;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n}\n.roof-panel.a{\n  transform: rotateY(0deg) translateZ(70px);\n  -webkit-transform: rotateY(0deg) translateZ(70px);\n}\n.roof-panel.b{\n transform: rotateY(90deg) translateZ(70px);\n -webkit-transform: rotateY(90deg) translateZ(70px);\n}\n.roof-panel.c{\n  transform: rotateY(180deg) translateZ(70px);\n  -webkit-transform: rotateY(180deg) translateZ(70px);\n}\n.roof-panel.d{\n  transform: rotateY(-90deg) translateZ(70px);\n  -webkit-transform: rotateY(-90deg) translateZ(70px);\n}\n\/* Light *\/\n.light{\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  top: -60px;\n  left: 85px;\n  z-index: 3;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n}\n.light-lid{\n  width: 30px;\n  height: 30px;\n  background-color: #eee;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform : rotateX(-90deg) translateZ(-14px);\n  -webkit-transform : rotateX(-90deg) translateZ(-14px);\n}\n.light .light-panel{\n  position: absolute;\n  width: 30px;\n  height: 40px;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n}\n.light .light-panel .bottom{\n  width: 30px;\n  height: 12px;\n  position: absolute;\n  bottom: 0px;\n  background-color: #355683;\n  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;\n}\n.light .light-panel .top{\n\twidth: 30px;\n\theight: 28px;\n\tposition: absolute;\n\ttop: 0px;\n\tbackground-color: #eee;\n\tbox-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #fff, inset 0 1px 0 #fff, inset 0 -1px 0 #fff;\n\tborder-radius: 30%;\n\tbox-shadow: 0 0 0px 0px #ffff00;\n\tbackground: #ffffdd;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffffdd 14%, #dfe5d7 59%, #b3bead 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffffdd 14%,#dfe5d7 59%,#b3bead 100%);\n\tbackground: radial-gradient(ellipse at center,  #ffffdd 14%,#dfe5d7 59%,#b3bead 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffdd', endColorstr='#b3bead',GradientType=1 );\n\tanimation: light 2.4s infinite; \n}\n@keyframes light {\n    0%   {\n    box-shadow: 0 0 0px 0px #FFFFD1;\n    background: #ffffdd;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffffdd 14%, #dfe5d7 59%, #b3bead 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffffdd 14%,#dfe5d7 59%,#b3bead 100%);\n\tbackground: radial-gradient(ellipse at center,  #ffffdd 14%,#dfe5d7 59%,#b3bead 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffdd', endColorstr='#b3bead',GradientType=1 );\n\t}\n    5%  {\n    box-shadow: 0 0 0px 0px #FFFFD1;\n\t}\n    25%  {\n    box-shadow: 0 0 50px 4px #FFFFD1;\n\tbackground: #ffffc4;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffffc4 0%, #e2e2e2 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffffc4 0%,#e2e2e2 100%);\n\tbackground: radial-gradient(ellipse at center,  #ffffc4 0%,#e2e2e2 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffc4', endColorstr='#e2e2e2',GradientType=1 );\n\t}\n    50% {\n\tbox-shadow: 0 0 20px 4px #FFFFD1;\n\tbackground: #ffffc4;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffffc4 0%, #e2e2e2 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffffc4 0%,#e2e2e2 100%);\n\tbackground: radial-gradient(ellipse at center,  #ffffc4 0%,#e2e2e2 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffc4', endColorstr='#e2e2e2',GradientType=1 );\n\t}<\/p>\n<p>\t75%   {\n\tbox-shadow: 0 0 20px 4px #FFFFD1;\n\tbackground: #ffffc4;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffffc4 0%, #e2e2e2 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffffc4 0%,#e2e2e2 100%);\n\tbackground: radial-gradient(ellipse at center,  #ffffc4 0%,#e2e2e2 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffc4', endColorstr='#e2e2e2',GradientType=1 );\n\t}\n    88%  {\n    box-shadow: 0 0 0px 0px #FFFFD1;\n\t}\n    100%  {\n    box-shadow: 0 0 0px 0px #FFFFD1;\n    background: #ffffdd;\n\tbackground: -moz-radial-gradient(center, ellipse cover,  #ffffdd 14%, #dfe5d7 59%, #b3bead 100%);\n\tbackground: -webkit-radial-gradient(center, ellipse cover,  #ffffdd 14%,#dfe5d7 59%,#b3bead 100%);\n\tbackground: radial-gradient(ellipse at center,  #ffffdd 14%,#dfe5d7 59%,#b3bead 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffdd', endColorstr='#b3bead',GradientType=1 );\n\t}\n}\n.light-panel.a{\n  transform: rotateY(0deg) translateZ(15px);\n  -webkit-transform: rotateY(0deg) translateZ(15px);\n}\n.light-panel.b{\n  transform: rotateY(90deg) translateZ(15px);\n  -webkit-transform: rotateY(90deg) translateZ(15px);\n}\n.light-panel.c{\n  transform: rotateY(180deg) translateZ(15px);\n  -webkit-transform: rotateY(180deg) translateZ(15px);\n}\n.light-panel.d{\n  transform: rotateY(-90deg) translateZ(15px);\n  -webkit-transform: rotateY(-90deg) translateZ(15px);\n}\n\/* Floor *\/\n.tardis .floor{\n  position: absolute;\n  width: 220px;\n  height: 220px;\n  left: -10px;\n  top: 360px;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n}\n.floor-lid{\n  position: absolute;\n  width: 220px;\n  height: 220px;\n  background-color: #355683;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  transform: rotateX(90deg) translateZ(109px);;\n  -webkit-transform: rotateX(90deg) translateZ(109px);;\n}\n.floor-panel{\n  position: absolute;\n  width: 220px;\n  height: 10px;\n  background-color: #3f577d;\n  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n}\n.floor-panel.a{\n  transform: rotateY(0deg) translateZ(110px);\n  -webkit-transform: rotateY(0deg) translateZ(110px);\n}\n.floor-panel.b{\n transform: rotateY(90deg) translateZ(110px);\n -webkit-transform: rotateY(90deg) translateZ(110px);\n}\n.floor-panel.c{\n  transform: rotateY(180deg) translateZ(110px);\n  -webkit-transform: rotateY(180deg) translateZ(110px);\n}\n.floor-panel.d{\n  transform: rotateY(-90deg) translateZ(110px);\n  -webkit-transform: rotateY(-90deg) translateZ(110px);\n}\n\/* Top sign *\/\n.side .top-sign{\n  width: 180px;\n  height: 28px;\n  background-color: #445d84; \n  border: solid 1px #54749f;\n  box-shadow: 0px 2px 4px rgba(0,0,0,.4);\n  border-radius: 2px;\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  z-index: 10;\n}\n.top-sign .text{\n  background-color: #28394d;\n  border: solid 1px #54749f;\n  border-radius: 2px;\n  width: 150px;\n  margin: 3px auto;\n  height: 20px;\n  color: #fff;\n  font-size: 14px;\n  line-height: 22px;\n  padding: 0px 5px;\n  box-shadow: inset 0px 0px 3px rgba(0,0,0,.4);\n  position: relative;\n  text-shadow: 0px 0px 4px rgba(255,255,255, .6);\n}\n.text .tiny{\n  font-size: 6px;\n  line-height: 8px;\n  text-align: center;\n  width: 20px;\n  position: absolute;\n  right: 60px;\n  top: 3px;\n}\n\/* Door frame *\/\n.side .door-frame{\n  position: absolute;\n  width: 160px;\n  left: 20px;\n  top: 35px;\n  bottom: 0px;\n  background-color: #445d84; \n  box-shadow:inset 0px 2px 8px rgba(0,0,0,.5);\n  z-index: 5;\n}\n.door-frame .door{\n  position: absolute;\n  top: 0px;\n  bottom: 0px;\n  width: 77px;\n  box-shadow:inset 0px 0px 3px rgba(0,0,0,.7);\n}\n.door.door-left{\n  left: 0px;\n}\n.door.door-right{\n  right: 0px;\n}\n\/* Insets *\/\n.door .door-inset{\n  position: absolute;\n  left: 10px;\n  bottom: 10px;\n  width: 55px;\n  height: 65px;\n  box-shadow:inset 0px .5px 5px rgba(0,0,0,.5);\n}\n.door-inset:nth-of-type(2){\n  bottom: 85px;\n}\n.door-inset:nth-of-type(3){\n  bottom: 160px;\n}\n\/* Sign *\/\n.door .sign{\n  position: absolute;\n  left: 15px;\n  bottom: 165px;\n  width: 45px;\n  height: 55px;\n  background-color: #d5e4f6;\n  box-shadow: inset 1px 0 0 #313d49, inset -1px 0 0 #313d49, inset 0 1px 0 #313d49, inset 0 -1px 0 #313d49;\n}\n\/* Window *\/\n.door .window{\n  position: absolute;\n  left: 10px;\n  bottom: 235px;\n  width: 55px;\n  height: 65px;\n  background-color: #28475d;\n}\n.window .pane{\n  width: 14px;\n  height: 28px;\n  background-color: #dfe7fc;\n  float: left;\n  margin: 2px;\n  box-shadow: inset 0px 0px 10px #fff;\n}\n.pane.a{\n  margin-left: 3px;\n  margin-right: 1px;\n}\n.pane.d{\n  margin-left: 3px;\n  margin-right: 1px;\n}\n.baker, .whittaker {\n    opacity: 1; \n    position: absolute; \n    top: 0; \n    left: 0;\n}\n.handle {\n    width: 2px;\n    height: 20px;\n    position: absolute;\n    border: 1px solid gray;\n    border-radius: 50%;\n    background-color: #9FA1A3;\n    top: 125px;\n    left: 3px;\n}\n.lock {\n    width: 5px;\n    height: 5px;\n    position: absolute;\n    border-radius: 50%;\n    background-color: #87898C;\n    top: 170px;\n    left: 3px;\n}\n.st-john {\n\tposition: absolute;\n\ttop: 127px; \n\tleft: 27px;\n }\n#mp3 {\n\tbottom: 0.05em;\n\tright: 5px;\n\tposition: absolute;\n\theight: 1.5em;\n\twidth: 30%;\n\tmin-width: 200px;\n}\n\/* Below Added for spinning background *\/\n#bg  {\n\twidth: 2200px;\n\theight: 2200px;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\tmargin-top: -1100px;\n\tmargin-left: -1100px;\n\tanimation: bg-spin 30s linear infinite;\n}\n#bg img {\n\twidth: 2200px;\n\theight: 2200px;\n}\n@keyframes bg-spin  {\n\t0%   {transform: rotate(360deg);}\n\t100% {transform: rotate(-360deg);}\n}\n\/* Fly Animation to FLY the Tardis Box  *\/\n#fly  {\t\t\t\n\tanimation: fly 30s linear infinite;\n\tanimation-direction:alternate;\n}\n@keyframes fly {\n\t0%   {left:50%; top:25%; transform:scale(0.2) rotate(-360deg);}\t\t\/* Scale - increase the size as it gets closer to the viewer *\/\n\t25%  {left:40%; top:60%;}\t\t\t\t\t\t\t\t\t\t\t\t\/* Left & Top allows lateral & verticles movement as it FLYs *\/\n\t50%  {left:75%; top:40%; transform:scale(0.65) rotate(360deg);}\t\/* Rotate allows for the Tardis to spin as it FLYs *\/\n\t75%  {left:30%; top:50%;}\n\t100% {left:100%; top:30%; transform:scale(1.2) rotate(360deg);}\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>POLICE PUBLIC CALL BOX POLICE PUBLIC CALL BOX POLICE PUBLIC CALL BOX POLICE PUBLIC CALL BOX Your browser does not support the audio element. The TARDIS from Doctor Who in CSS motion This modified Pure CSS version of the Tardis<\/p>\n","protected":false},"author":2,"featured_media":2609,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,218,217],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2257"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=2257"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2257\/revisions"}],"predecessor-version":[{"id":2770,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/2257\/revisions\/2770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2609"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=2257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=2257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=2257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}