Stairs 3D

codespector.css

/**
 * Stairs 3D
 */

*,:before,:after {  box-sizing: border-box;}* {  -webkit-transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);  transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);}html {  font-size: 16px;}body {  font-family: 'Open Sans', sans-serif;  min-height: 100vh;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;  margin: 0;  overflow: hidden;  position: relative;  background: #EDF1F2;}.main-header {  position: absolute;  top: 0;  left: 0;  font-weight: 700;  font-size: 1.5rem;  width: 100%;  padding: .25rem;  height: 3rem;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;}.buttons {  z-index: 1;  position: absolute;  padding: 0 1rem .5rem;  top: 3.5rem;  left: 0;  width: 100%;  min-height: 2rem;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;}.buttons > * {  -webkit-box-flex: 1;      -ms-flex: 1;          flex: 1;}.buttons > *:first-of-type {  margin-right: .5rem;}button {  background: transparent;  border: 1px solid white;  box-shadow: 0px 1px 4px gray;  margin: 0;  padding: 0;  font-size: 100%;  outline: none;  -webkit-tap-highlight-color: transparent;  cursor: pointer;  -webkit-transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);  transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);  max-width: 10rem;  min-height: 2rem;}button:hover {  border-color: #ccc;}button:focus, button:active {  color: dodgerblue;}.main {  position: relative;  width: 100%;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;      -ms-flex-direction: column;          flex-direction: column;  -webkit-box-pack: center;      -ms-flex-pack: center;          justify-content: center;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;}.scene {  -webkit-tap-highlight-color: transparent;  width: 150px;  height: 150px;  position: relative;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;  -webkit-transform: rotateX(-30deg) rotateY(45deg) rotateZ(0deg);          transform: rotateX(-30deg) rotateY(45deg) rotateZ(0deg);  cursor: pointer;}.scene.is-in .cube-wrap {  -webkit-transform-origin: 50% 50%;          transform-origin: 50% 50%;  -webkit-transform: scaleZ(1);          transform: scaleZ(1);}.scene.is-in .cube-wrap {  left: 60px;}.scene.is-in .cube {  -webkit-transform: scaleY(1);          transform: scaleY(1);}.scene.is-in .shadows {  opacity: 0;}.scene.toggle .cubes {  -webkit-animation-play-state: running;          animation-play-state: running;}.cubes {  width: inherit;  height: inherit;  position: relative;  top: 0;  left: 0;  -webkit-transform-style: inherit;          transform-style: inherit;  -webkit-animation: spin-y 10s infinite linear;          animation: spin-y 10s infinite linear;  -webkit-animation-play-state: paused;          animation-play-state: paused;}.cubes > .shadows {  width: inherit;  height: inherit;  position: absolute;  top: 0;  left: 0;  -webkit-transform-style: inherit;          transform-style: inherit;  box-shadow: -30px 0 40px #999;  -webkit-transform-origin: 0% 100%;          transform-origin: 0% 100%;  -webkit-transform: rotateX(90deg) translateY(75px);          transform: rotateX(90deg) translateY(75px);  z-index: 1;}.cubes > .shadows:before {  content: '';  width: 100%;  height: 90%;  position: absolute;  top: 5%;  left: 0;  box-shadow: -90px 0 80px #ccc, -150px 0 80px #eee;  z-index: -1;  -webkit-transform: translateZ(-1px);          transform: translateZ(-1px);}.cube-wrap {  -webkit-transform-origin: 50% 50%;          transform-origin: 50% 50%;  -webkit-transform: scaleZ(5);          transform: scaleZ(5);  position: absolute;  bottom: 0;  left: 0;  width: 30px;  height: 30px;  -webkit-transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);  transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;}.cube-wrap:not(.cube-wrap--5) .top {  background: -webkit-linear-gradient(left, #585855, #2d2e2d);  background: linear-gradient(90deg, #585855, #2d2e2d);}.cube-wrap--2 {  left: 30px;}.cube-wrap--2 > .cube {  -webkit-transform: scaleY(2);          transform: scaleY(2);}.cube-wrap--3 {  left: 60px;}.cube-wrap--3 > .cube {  -webkit-transform: scaleY(3);          transform: scaleY(3);}.cube-wrap--4 {  left: 90px;}.cube-wrap--4 > .cube {  -webkit-transform: scaleY(4);          transform: scaleY(4);}.cube-wrap--5 {  left: 120px;}.cube-wrap--5 > .cube {  -webkit-transform: scaleY(5);          transform: scaleY(5);}.cube {  -webkit-transform-origin: 0% 100%;          transform-origin: 0% 100%;  position: absolute;  top: 0;  left: 0;  width: inherit;  height: inherit;  -webkit-transform-style: preserve-3d;          transform-style: preserve-3d;  -webkit-backface-visibility: hidden;          backface-visibility: hidden;}.cube > .side {  font-size: 0;  position: absolute;  width: 30px;  height: 30px;  bottom: 0;  left: 0;}.cube > .back {  background: #262727;  -webkit-transform: translateZ(-15px) rotateY(180deg);          transform: translateZ(-15px) rotateY(180deg);}.cube > .right {  background: #1e1f20;  -webkit-transform: rotateY(-270deg) translateX(15px);          transform: rotateY(-270deg) translateX(15px);  -webkit-transform-origin: top right;          transform-origin: top right;}.cube > .left {  background: #1e1f20;  -webkit-transform: rotateY(270deg) translateX(-15px);          transform: rotateY(270deg) translateX(-15px);  -webkit-transform-origin: center left;          transform-origin: center left;}.cube > .top {  background: #585855;  -webkit-transform: rotateX(-90deg) translateY(-15px);          transform: rotateX(-90deg) translateY(-15px);  -webkit-transform-origin: top center;          transform-origin: top center;}.cube > .down {  background: #585855;  -webkit-transform: rotateX(90deg) translateY(15px);          transform: rotateX(90deg) translateY(15px);  -webkit-transform-origin: bottom center;          transform-origin: bottom center;}.cube > .front {  background: #262727;  -webkit-transform: translateZ(15px);          transform: translateZ(15px);}.main-footer {  position: absolute;  bottom: 0;  right: 0;  height: 2rem;  width: 100%;  background: rgba(153, 153, 153, 0.1);  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: end;      -ms-flex-pack: end;          justify-content: flex-end;  -webkit-box-align: center;      -ms-flex-align: center;          align-items: center;  padding: 0 1rem;}.main-footer > a {  font-size: .75rem;  color: #333;}@-webkit-keyframes spin-y {  to {    -webkit-transform: rotateY(1turn);            transform: rotateY(1turn);  }}@keyframes spin-y {  to {    -webkit-transform: rotateY(1turn);            transform: rotateY(1turn);  }}

codespector.html

<header class="main-header">Stairs 3D</header><footer class="main-footer">  <a href="http://fluent.microsoft.com/" target="_blank">fluent.microsoft.com</a></footer><div class="buttons">  <button id="btn-1">In</button>  <button id="btn-2">Out</button>  </div><main class="main">  <section class="scene toggle">    <div class="cubes">      <div class="shadows"></div>      <div class="cube-wrap cube-wrap--1">        <div class="cube">          <div class="front side">front</div>          <div class="back side">back</div>          <div class="top side">top</div>          <div class="down side">down</div>          <div class="left side">left</div>          <div class="right side">right</div>        </div>      </div>      <div class="cube-wrap cube-wrap--2">        <div class="cube">          <div class="front side">front</div>          <div class="back side">back</div>          <div class="top side">top</div>          <div class="down side">down</div>          <div class="left side">left</div>          <div class="right side">right</div>        </div>      </div>      <div class="cube-wrap cube-wrap--3">        <div class="cube">          <div class="front side">front</div>          <div class="back side">back</div>          <div class="top side">top</div>          <div class="down side">down</div>          <div class="left side">left</div>          <div class="right side">right</div>        </div>      </div>      <div class="cube-wrap cube-wrap--4">        <div class="cube">          <div class="front side">front</div>          <div class="back side">back</div>          <div class="top side">top</div>          <div class="down side">down</div>          <div class="left side">left</div>          <div class="right side">right</div>        </div>      </div>      <div class="cube-wrap cube-wrap--5">        <div class="cube">          <div class="front side">front</div>          <div class="back side">back</div>          <div class="top side">top</div>          <div class="down side">down</div>          <div class="left side">left</div>          <div class="right side">right</div>        </div>      </div>    </div>  </section></main>

codespector.js

'use strict';var scene = qs('.scene');byId('btn-1').addEventListener('touchstart', collapse);byId('btn-1').addEventListener('click', collapse);byId('btn-2').addEventListener('touchstart', expand);byId('btn-2').addEventListener('click', expand);scene.addEventListener('touchstart', toggle);scene.addEventListener('click', toggle);function toggle(event) {  event.preventDefault();  event.stopPropagation();  scene.classList.toggle('toggle');}function collapse(event) {  scene.classList.add('is-in');}function expand(event) {  scene.classList.remove('is-in');}function qs(expr, context) {  return (context || document).querySelector(expr);}function qsa(expr, context) {  return [].slice.call((context || document).querySelectorAll(expr), 0);}function byId(id) {  return document.getElementById(id);}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"all"}