3D часы - пример html js css

Question

3D часы - пример html js css

HTML код

CSS код
JS код
Результат кода

3D часы (HTML код)



<div class="container">

  <div class="hr"></div>

  <div class="min"></div>

  <div class="sec"></div>

  <div class="surface">

    <!--

    Place the sides in this order:

    1. back

    2. bottom

    3. front

    4. left

    5. right

    6. top

    

    -->

    <div class="block b1">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b2">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b3">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b4">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b5">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b6">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b7">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b8">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b9">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b10">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b11">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b12">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b13">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b14">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b15">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b16">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b17">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b18">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b19">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b20">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b21">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b22">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b23">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b24">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b25">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b26">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b27">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b28">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b29">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b30">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b31">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b32">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b33">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b34">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b35">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b36">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b37">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b38">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b39">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b40">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b41">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b42">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b43">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b44">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b45">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b46">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b47">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b48">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b49">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b50">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b51">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b52">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b53">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b54">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b55">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b56">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b57">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b58">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b59">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b60">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b61">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b62">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b63">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b64">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b65">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b66">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b67">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b68">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b69">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b70">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b71">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b72">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b73">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b74">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b75">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b76">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b77">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b78">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b79">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b80">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

    <div class="block b81">

      <div class="outer">

        <div class="inner">

          <div class="front"></div>

          <div class="left"></div>

          <div class="top"></div>

        </div>

      </div>

    </div>

  </div>

</div>

3D часы (CSS код)





* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-size: 8px;

  height: 100vh;

  margin: 0;

}



.container, .block, .inner > div, .hr, .min {

  position: absolute;

}



.container, .surface, .block, .outer, .inner {

  transform-style: preserve-3d;

}



.container, .inner > div {

  display: flex;

}



.container {

  background: #188080;

  margin: auto;

  overflow: hidden;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  perspective: 1000px;

}



.surface {

  display: block;

  width: 32em;

  height: 4em;

  margin: auto;

  transform: translateY(16em) rotateX(60deg) rotateZ(-30deg);

  will-change: transform;

}



.block {

  display: none;

  bottom: 0;

}



.inner > div {

  flex-wrap: wrap;

  align-content: flex-start;

  width: 1em;

  height: 1em;

}

.inner > div.front:before, .inner > div.back:before, .inner > div.left:before, .inner > div.right:before {

  background-color: #000;

  content: "";

  width: 100%;

  height: 100%;

}

.inner > div.front:before, .inner > div.back:before {

  opacity: 0.2;

}

.inner > div.left:before, .inner > div.right:before {

  opacity: 0.4;

}



.outer, .inner {

  position: relative;

  width: 1em;

}



.inner {

  transform: rotateX(-90deg) translateZ(1em);

}



.back {

  transform: translateZ(-1em) rotateY(180deg);

}



.left {

  transform-origin: center left;

  transform: rotateY(270deg) translateX(-1em);

}



.right {

  transform-origin: top right;

}



.top, .bottom {

  transform-origin: top center;

}



.b1 {

  display: inherit;

  transform: translate3d(1em, -4em, 1em);

}

.b1 .inner div {

  background-color: #333;

}

.b1 .inner div.top, .b1 .inner div.bottom {

  width: 30em;

  height: 3em;

}

.b1 .inner div.top {

  transform: rotateX(-90deg) translateY(-2em);

}

.b1 .inner div.bottom {

  transform: rotateX(-90deg) translateY(-2em) translateZ(1em);

}

.b1 .inner div.front, .b1 .inner div.back {

  width: 30em;

}

.b1 .inner div.front {

  transform: translateZ(2em);

}

.b1 .inner div.left, .b1 .inner div.right {

  width: 3em;

}

.b1 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 27em);

}



.b2 {

  display: inherit;

  transform: translate3d(31em, -4em, 31em);

}

.b2 .inner div {

  background-color: #333;

}

.b2 .inner div.top, .b2 .inner div.bottom {

  height: 3em;

}

.b2 .inner div.top {

  transform: rotateX(-90deg) translateY(-2em);

}

.b2 .inner div.bottom {

  transform: rotateX(-90deg) translateY(-2em) translateZ(30em);

}

.b2 .inner div.front, .b2 .inner div.back {

  height: 30em;

}

.b2 .inner div.front {

  transform: translateZ(2em);

}

.b2 .inner div.left, .b2 .inner div.right {

  width: 3em;

  height: 30em;

}

.b2 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, -2em);

}



.b3 {

  display: inherit;

  transform: translate3d(1em, -1em, 2em);

}

.b3 .inner div {

  background-color: #800b00;

}

.b3 .inner div.top, .b3 .inner div.bottom {

  width: 30em;

}

.b3 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b3 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b3 .inner div.front, .b3 .inner div.back {

  width: 30em;

}

.b3 .inner div.front {

  transform: translateZ(0em);

}

.b3 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 29em);

}



.b4 {

  display: inherit;

  transform: translate3d(0em, -4em, 31em);

}

.b4 .inner div {

  background-color: #333;

}

.b4 .inner div.top, .b4 .inner div.bottom {

  height: 3em;

}

.b4 .inner div.top {

  transform: rotateX(-90deg) translateY(-2em);

}

.b4 .inner div.bottom {

  transform: rotateX(-90deg) translateY(-2em) translateZ(30em);

}

.b4 .inner div.front, .b4 .inner div.back {

  height: 30em;

}

.b4 .inner div.front {

  transform: translateZ(2em);

}

.b4 .inner div.left, .b4 .inner div.right {

  width: 3em;

  height: 30em;

}

.b4 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, -2em);

}



.b5 {

  display: inherit;

  transform: translate3d(30em, -1em, 31em);

}

.b5 .inner div {

  background-color: #800b00;

}

.b5 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b5 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(29em);

}

.b5 .inner div.front, .b5 .inner div.back {

  height: 29em;

}

.b5 .inner div.front {

  transform: translateZ(0em);

}

.b5 .inner div.left, .b5 .inner div.right {

  height: 29em;

}

.b5 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b6 {

  display: inherit;

  transform: translate3d(29em, -1em, 30em);

}

.b6 .inner div {

  background-color: #fa2000;

}

.b6 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b6 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(28em);

}

.b6 .inner div.front, .b6 .inner div.back {

  height: 28em;

}

.b6 .inner div.front {

  transform: translateZ(0em);

}

.b6 .inner div.left, .b6 .inner div.right {

  height: 28em;

}

.b6 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b7 {

  display: inherit;

  transform: translate3d(28em, -2em, 28em);

}

.b7 .inner div {

  background-color: #800b00;

}

.b7 .inner div.top, .b7 .inner div.bottom {

  height: 2em;

}

.b7 .inner div.top {

  transform: rotateX(-90deg) translateY(-1em);

}

.b7 .inner div.bottom {

  transform: rotateX(-90deg) translateY(-1em) translateZ(25em);

}

.b7 .inner div.front, .b7 .inner div.back {

  height: 25em;

}

.b7 .inner div.front {

  transform: translateZ(1em);

}

.b7 .inner div.left, .b7 .inner div.right {

  width: 2em;

  height: 25em;

}

.b7 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, -1em);

}



.b8 {

  display: inherit;

  transform: translate3d(4em, -3em, 28em);

}

.b8 .inner div {

  background-color: #c0c0c0;

}

.b8 .inner div.top, .b8 .inner div.bottom {

  width: 24em;

}

.b8 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b8 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(24em);

}

.b8 .inner div.front, .b8 .inner div.back {

  width: 24em;

  height: 24em;

}

.b8 .inner div.front {

  transform: translateZ(0em);

}

.b8 .inner div.left, .b8 .inner div.right {

  height: 24em;

}

.b8 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 23em);

}



.b9 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b9 .inner div {

  background-color: #333;

}

.b9 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b9 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b9 .inner div.front {

  transform: translateZ(0em);

}

.b9 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b10 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b10 .inner div {

  background-color: #333;

}

.b10 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b10 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b10 .inner div.front {

  transform: translateZ(0em);

}

.b10 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b11 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b11 .inner div {

  background-color: #333;

}

.b11 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b11 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b11 .inner div.front {

  transform: translateZ(0em);

}

.b11 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b12 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b12 .inner div {

  background-color: #333;

}

.b12 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b12 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b12 .inner div.front {

  transform: translateZ(0em);

}

.b12 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b13 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b13 .inner div {

  background-color: #333;

}

.b13 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b13 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b13 .inner div.front {

  transform: translateZ(0em);

}

.b13 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b14 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b14 .inner div {

  background-color: #333;

}

.b14 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b14 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b14 .inner div.front {

  transform: translateZ(0em);

}

.b14 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b15 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b15 .inner div {

  background-color: #333;

}

.b15 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b15 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b15 .inner div.front {

  transform: translateZ(0em);

}

.b15 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b16 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b16 .inner div {

  background-color: #333;

}

.b16 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b16 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b16 .inner div.front {

  transform: translateZ(0em);

}

.b16 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b17 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b17 .inner div {

  background-color: #333;

}

.b17 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b17 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b17 .inner div.front {

  transform: translateZ(0em);

}

.b17 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b18 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b18 .inner div {

  background-color: #333;

}

.b18 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b18 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b18 .inner div.front {

  transform: translateZ(0em);

}

.b18 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b19 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b19 .inner div {

  background-color: #333;

}

.b19 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b19 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b19 .inner div.front {

  transform: translateZ(0em);

}

.b19 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b20 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b20 .inner div {

  background-color: #333;

}

.b20 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b20 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b20 .inner div.front {

  transform: translateZ(0em);

}

.b20 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b21 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b21 .inner div {

  background-color: #333;

}

.b21 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b21 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b21 .inner div.front {

  transform: translateZ(0em);

}

.b21 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b22 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b22 .inner div {

  background-color: #333;

}

.b22 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b22 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b22 .inner div.front {

  transform: translateZ(0em);

}

.b22 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b23 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b23 .inner div {

  background-color: #333;

}

.b23 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b23 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b23 .inner div.front {

  transform: translateZ(0em);

}

.b23 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b24 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b24 .inner div {

  background-color: #333;

}

.b24 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b24 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b24 .inner div.front {

  transform: translateZ(0em);

}

.b24 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b25 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b25 .inner div {

  background-color: #333;

}

.b25 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b25 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b25 .inner div.front {

  transform: translateZ(0em);

}

.b25 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b26 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b26 .inner div {

  background-color: #333;

}

.b26 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b26 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b26 .inner div.front {

  transform: translateZ(0em);

}

.b26 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b27 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b27 .inner div {

  background-color: #333;

}

.b27 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b27 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b27 .inner div.front {

  transform: translateZ(0em);

}

.b27 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b28 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b28 .inner div {

  background-color: #333;

}

.b28 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b28 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b28 .inner div.front {

  transform: translateZ(0em);

}

.b28 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b29 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b29 .inner div {

  background-color: #333;

}

.b29 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b29 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b29 .inner div.front {

  transform: translateZ(0em);

}

.b29 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b30 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b30 .inner div {

  background-color: #333;

}

.b30 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b30 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b30 .inner div.front {

  transform: translateZ(0em);

}

.b30 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b31 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b31 .inner div {

  background-color: #333;

}

.b31 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b31 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b31 .inner div.front {

  transform: translateZ(0em);

}

.b31 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b32 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b32 .inner div {

  background-color: #333;

}

.b32 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b32 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b32 .inner div.front {

  transform: translateZ(0em);

}

.b32 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b33 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b33 .inner div {

  background-color: #333;

}

.b33 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b33 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b33 .inner div.front {

  transform: translateZ(0em);

}

.b33 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b34 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b34 .inner div {

  background-color: #333;

}

.b34 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b34 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b34 .inner div.front {

  transform: translateZ(0em);

}

.b34 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b35 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b35 .inner div {

  background-color: #333;

}

.b35 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b35 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b35 .inner div.front {

  transform: translateZ(0em);

}

.b35 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b36 {

  display: inherit;

  transform: translate3d(16em, -2em, 16em);

}

.b36 .inner div {

  background-color: #333;

}

.b36 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b36 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b36 .inner div.front {

  transform: translateZ(0em);

}

.b36 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b37 {

  display: inherit;

  transform: translate3d(21em, -2em, 26em);

}

.b37 .inner div {

  background-color: #333;

}

.b37 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b37 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b37 .inner div.front, .b37 .inner div.back {

  height: 2em;

}

.b37 .inner div.front {

  transform: translateZ(0em);

}

.b37 .inner div.left, .b37 .inner div.right {

  height: 2em;

}

.b37 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b38 {

  display: inherit;

  transform: translate3d(20em, -2em, 25em);

}

.b38 .inner div {

  background-color: #333;

}

.b38 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b38 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b38 .inner div.front {

  transform: translateZ(0em);

}

.b38 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b39 {

  display: inherit;

  transform: translate3d(20em, -2em, 26em);

}

.b39 .inner div {

  background-color: #fff;

}

.b39 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b39 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b39 .inner div.front {

  transform: translateZ(0em);

}

.b39 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b40 {

  display: inherit;

  transform: translate3d(25em, -2em, 22em);

}

.b40 .inner div {

  background-color: #333;

}

.b40 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b40 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b40 .inner div.front, .b40 .inner div.back {

  height: 2em;

}

.b40 .inner div.front {

  transform: translateZ(0em);

}

.b40 .inner div.left, .b40 .inner div.right {

  height: 2em;

}

.b40 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b41 {

  display: inherit;

  transform: translate3d(24em, -2em, 21em);

}

.b41 .inner div {

  background-color: #333;

}

.b41 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b41 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b41 .inner div.front {

  transform: translateZ(0em);

}

.b41 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b42 {

  display: inherit;

  transform: translate3d(24em, -2em, 22em);

}

.b42 .inner div {

  background-color: #fff;

}

.b42 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b42 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b42 .inner div.front {

  transform: translateZ(0em);

}

.b42 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b43 {

  display: inherit;

  transform: translate3d(26em, -2em, 17em);

}

.b43 .inner div {

  background-color: #333;

}

.b43 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b43 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b43 .inner div.front, .b43 .inner div.back {

  height: 2em;

}

.b43 .inner div.front {

  transform: translateZ(0em);

}

.b43 .inner div.left, .b43 .inner div.right {

  height: 2em;

}

.b43 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b44 {

  display: inherit;

  transform: translate3d(25em, -2em, 16em);

}

.b44 .inner div {

  background-color: #333;

}

.b44 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b44 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b44 .inner div.front {

  transform: translateZ(0em);

}

.b44 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b45 {

  display: inherit;

  transform: translate3d(25em, -2em, 17em);

}

.b45 .inner div {

  background-color: #fff;

}

.b45 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b45 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b45 .inner div.front {

  transform: translateZ(0em);

}

.b45 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b46 {

  display: inherit;

  transform: translate3d(25em, -2em, 12em);

}

.b46 .inner div {

  background-color: #333;

}

.b46 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b46 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b46 .inner div.front, .b46 .inner div.back {

  height: 2em;

}

.b46 .inner div.front {

  transform: translateZ(0em);

}

.b46 .inner div.left, .b46 .inner div.right {

  height: 2em;

}

.b46 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b47 {

  display: inherit;

  transform: translate3d(24em, -2em, 11em);

}

.b47 .inner div {

  background-color: #333;

}

.b47 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b47 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b47 .inner div.front {

  transform: translateZ(0em);

}

.b47 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b48 {

  display: inherit;

  transform: translate3d(24em, -2em, 12em);

}

.b48 .inner div {

  background-color: #fff;

}

.b48 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b48 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b48 .inner div.front {

  transform: translateZ(0em);

}

.b48 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b49 {

  display: inherit;

  transform: translate3d(21em, -2em, 8em);

}

.b49 .inner div {

  background-color: #333;

}

.b49 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b49 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b49 .inner div.front, .b49 .inner div.back {

  height: 2em;

}

.b49 .inner div.front {

  transform: translateZ(0em);

}

.b49 .inner div.left, .b49 .inner div.right {

  height: 2em;

}

.b49 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b50 {

  display: inherit;

  transform: translate3d(20em, -2em, 7em);

}

.b50 .inner div {

  background-color: #333;

}

.b50 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b50 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b50 .inner div.front {

  transform: translateZ(0em);

}

.b50 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b51 {

  display: inherit;

  transform: translate3d(20em, -2em, 8em);

}

.b51 .inner div {

  background-color: #fff;

}

.b51 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b51 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b51 .inner div.front {

  transform: translateZ(0em);

}

.b51 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b52 {

  display: inherit;

  transform: translate3d(16em, -2em, 7em);

}

.b52 .inner div {

  background-color: #333;

}

.b52 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b52 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b52 .inner div.front, .b52 .inner div.back {

  height: 2em;

}

.b52 .inner div.front {

  transform: translateZ(0em);

}

.b52 .inner div.left, .b52 .inner div.right {

  height: 2em;

}

.b52 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b53 {

  display: inherit;

  transform: translate3d(15em, -2em, 6em);

}

.b53 .inner div {

  background-color: #333;

}

.b53 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b53 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b53 .inner div.front {

  transform: translateZ(0em);

}

.b53 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b54 {

  display: inherit;

  transform: translate3d(15em, -2em, 7em);

}

.b54 .inner div {

  background-color: #fff;

}

.b54 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b54 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b54 .inner div.front {

  transform: translateZ(0em);

}

.b54 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b55 {

  display: inherit;

  transform: translate3d(11em, -2em, 8em);

}

.b55 .inner div {

  background-color: #333;

}

.b55 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b55 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b55 .inner div.front, .b55 .inner div.back {

  height: 2em;

}

.b55 .inner div.front {

  transform: translateZ(0em);

}

.b55 .inner div.left, .b55 .inner div.right {

  height: 2em;

}

.b55 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b56 {

  display: inherit;

  transform: translate3d(10em, -2em, 7em);

}

.b56 .inner div {

  background-color: #333;

}

.b56 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b56 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b56 .inner div.front {

  transform: translateZ(0em);

}

.b56 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b57 {

  display: inherit;

  transform: translate3d(10em, -2em, 8em);

}

.b57 .inner div {

  background-color: #fff;

}

.b57 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b57 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b57 .inner div.front {

  transform: translateZ(0em);

}

.b57 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b58 {

  display: inherit;

  transform: translate3d(7em, -2em, 12em);

}

.b58 .inner div {

  background-color: #333;

}

.b58 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b58 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b58 .inner div.front, .b58 .inner div.back {

  height: 2em;

}

.b58 .inner div.front {

  transform: translateZ(0em);

}

.b58 .inner div.left, .b58 .inner div.right {

  height: 2em;

}

.b58 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b59 {

  display: inherit;

  transform: translate3d(6em, -2em, 11em);

}

.b59 .inner div {

  background-color: #333;

}

.b59 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b59 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b59 .inner div.front {

  transform: translateZ(0em);

}

.b59 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b60 {

  display: inherit;

  transform: translate3d(6em, -2em, 12em);

}

.b60 .inner div {

  background-color: #fff;

}

.b60 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b60 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b60 .inner div.front {

  transform: translateZ(0em);

}

.b60 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b61 {

  display: inherit;

  transform: translate3d(6em, -2em, 17em);

}

.b61 .inner div {

  background-color: #333;

}

.b61 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b61 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b61 .inner div.front, .b61 .inner div.back {

  height: 2em;

}

.b61 .inner div.front {

  transform: translateZ(0em);

}

.b61 .inner div.left, .b61 .inner div.right {

  height: 2em;

}

.b61 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b62 {

  display: inherit;

  transform: translate3d(5em, -2em, 16em);

}

.b62 .inner div {

  background-color: #333;

}

.b62 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b62 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b62 .inner div.front {

  transform: translateZ(0em);

}

.b62 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b63 {

  display: inherit;

  transform: translate3d(5em, -2em, 17em);

}

.b63 .inner div {

  background-color: #fff;

}

.b63 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b63 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b63 .inner div.front {

  transform: translateZ(0em);

}

.b63 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b64 {

  display: inherit;

  transform: translate3d(7em, -2em, 22em);

}

.b64 .inner div {

  background-color: #333;

}

.b64 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b64 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b64 .inner div.front, .b64 .inner div.back {

  height: 2em;

}

.b64 .inner div.front {

  transform: translateZ(0em);

}

.b64 .inner div.left, .b64 .inner div.right {

  height: 2em;

}

.b64 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b65 {

  display: inherit;

  transform: translate3d(6em, -2em, 21em);

}

.b65 .inner div {

  background-color: #333;

}

.b65 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b65 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b65 .inner div.front {

  transform: translateZ(0em);

}

.b65 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b66 {

  display: inherit;

  transform: translate3d(6em, -2em, 22em);

}

.b66 .inner div {

  background-color: #fff;

}

.b66 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b66 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b66 .inner div.front {

  transform: translateZ(0em);

}

.b66 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b67 {

  display: inherit;

  transform: translate3d(11em, -2em, 26em);

}

.b67 .inner div {

  background-color: #333;

}

.b67 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b67 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b67 .inner div.front, .b67 .inner div.back {

  height: 2em;

}

.b67 .inner div.front {

  transform: translateZ(0em);

}

.b67 .inner div.left, .b67 .inner div.right {

  height: 2em;

}

.b67 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b68 {

  display: inherit;

  transform: translate3d(10em, -2em, 25em);

}

.b68 .inner div {

  background-color: #333;

}

.b68 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b68 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b68 .inner div.front {

  transform: translateZ(0em);

}

.b68 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b69 {

  display: inherit;

  transform: translate3d(10em, -2em, 26em);

}

.b69 .inner div {

  background-color: #fff;

}

.b69 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b69 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b69 .inner div.front {

  transform: translateZ(0em);

}

.b69 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b70 {

  display: inherit;

  transform: translate3d(16em, -2em, 27em);

}

.b70 .inner div {

  background-color: #333;

}

.b70 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b70 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(2em);

}

.b70 .inner div.front, .b70 .inner div.back {

  height: 2em;

}

.b70 .inner div.front {

  transform: translateZ(0em);

}

.b70 .inner div.left, .b70 .inner div.right {

  height: 2em;

}

.b70 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b71 {

  display: inherit;

  transform: translate3d(15em, -2em, 26em);

}

.b71 .inner div {

  background-color: #333;

}

.b71 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b71 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b71 .inner div.front {

  transform: translateZ(0em);

}

.b71 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b72 {

  display: inherit;

  transform: translate3d(15em, -2em, 27em);

}

.b72 .inner div {

  background-color: #fff;

}

.b72 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b72 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b72 .inner div.front {

  transform: translateZ(0em);

}

.b72 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b73 {

  display: inherit;

  transform: translate3d(1em, -1em, 3em);

}

.b73 .inner div {

  background-color: #fa2000;

}

.b73 .inner div.top, .b73 .inner div.bottom {

  width: 28em;

}

.b73 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b73 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(1em);

}

.b73 .inner div.front, .b73 .inner div.back {

  width: 28em;

}

.b73 .inner div.front {

  transform: translateZ(0em);

}

.b73 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 27em);

}



.b74 {

  display: inherit;

  transform: translate3d(1em, -1em, 30em);

}

.b74 .inner div {

  background-color: #fa2000;

}

.b74 .inner div.top {

  transform: rotateX(-90deg) translateY(0em);

}

.b74 .inner div.bottom {

  transform: rotateX(-90deg) translateY(0em) translateZ(27em);

}

.b74 .inner div.front, .b74 .inner div.back {

  height: 27em;

}

.b74 .inner div.front {

  transform: translateZ(0em);

}

.b74 .inner div.left, .b74 .inner div.right {

  height: 27em;

}

.b74 .inner div.right {

  transform: rotateY(-270deg) translate3d(1em, 0, 0em);

}



.b75 {

  display: inherit;

  transform: translate3d(4em, -2em, 4em);

}

.b75 .inner div {

  background-color: #800b00;

}

.b75 .inner div.top, .b75 .inner div.bottom {

  width: 24em;

  height: 2em;

}

.b75 .inner div.top {

  transform: rotateX(-90deg) translateY(-1em);

}

.b75 .inner div.bottom {

  transform: rotateX(-90deg) translateY(-1em) translateZ(1em);


                    
                
                    749  
                
                                
                    0  
                
                
    

                
                    Примеры HTML,CSS,JS                    
                        clockчасыcssjs



                
    
        
            Comments

            
        
                
            Ничего не найдено.
        
        
    
        
                            

                

        

        
            
                Click here to cancel reply.