FN01_Cabinet_POC

FN01_Cabinet_POC.markdown

FN01_Cabinet_POC

Built with http://tridiv.com

A Pen by Dermot McGuire on CodePen.

License.

index.html

<div id="tridiv">
  <div class="scene" style="-webkit-transform:rotateX(-364deg) rotateY(-785deg); -moz-transform:rotateX(-364deg) rotateY(-785deg); -ms-transform:rotateX(-364deg) rotateY(-785deg); transform:rotateX(-364deg) rotateY(-785deg); ">
    <div class="shape cuboid-1 cabinet">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
    <div class="shape cuboid-2 bottom">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
    <div class="shape cuboid-3 drawer">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
    <div class="shape cylinder-1 wheel-back-left">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.368627);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.639216);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.576471);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.231373);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0392157);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0196078);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
    </div>
    <div class="shape cylinder-2 wheel-front-left">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.368627);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.639216);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.576471);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.231373);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0392157);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0196078);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
    </div>
    <div class="shape cylinder-3 wheel-front-right">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.368627);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.639216);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.576471);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.231373);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0392157);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0196078);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
    </div>
    <div class="shape cylinder-4 wheel-back-right">
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s0">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.247059);"></div>
      </div>
      <div class="face side s1">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.368627);"></div>
      </div>
      <div class="face side s2">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.482353);"></div>
      </div>
      <div class="face side s3">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s4">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.639216);"></div>
      </div>
      <div class="face side s5">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.576471);"></div>
      </div>
      <div class="face side s6">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.470588);"></div>
      </div>
      <div class="face side s7">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.352941);"></div>
      </div>
      <div class="face side s8">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.231373);"></div>
      </div>
      <div class="face side s9">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.113725);"></div>
      </div>
      <div class="face side s10">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face side s11">
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0392157);"></div>
      </div>
      <div class="face side s12">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0196078);"></div>
      </div>
      <div class="face side s13">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.129412);"></div>
      </div>
    </div>
    <div class="shape cuboid-4 door,right">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
    <div class="shape cuboid-5 door-left">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
    <div class="shape cuboid-6 door-right">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
    <div class="shape cuboid-7 picture-frame">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.235294);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.235294);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.235294);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.235294);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.235294);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.235294);"></div>
      </div>
    </div>
    <div class="shape cuboid-8 cub-1">
      <div class="face ft">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bk">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face rt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face lt">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face bm">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
      <div class="face tp">
        <div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.188235);"></div>
      </div>
    </div>
  </div>
</div>

style.css

/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */ #tridiv {
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 125%;
}
.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
}
.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
  /* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100%!important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
.side {
  left: 50%;
}
.cr, .cr .side {
  height: 100%;
}
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
[class*="cylinder"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp, [class*="cylinder"] .bm, [class*="cylinder"] .tp .photon-shader, [class*="cylinder"] .bm .photon-shader {
  border-radius: 50%;
}
[class*="cylinder"] .bm {
  top: 100%;
}
/* .cabinet styles */
.cabinet {
  transform:translate3D(0em, -5.45em, -3em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:9em;
  height:16.7em;
  margin:-8.35em 0 0 -4.5em;
}
.cabinet .ft {
  transform:translateZ(3em);
}
.cabinet .bk {
  transform:translateZ(-3em) rotateY(180deg);
}
.cabinet .rt, .cabinet .lt {
  width:6em;
  height:16.7em;
}
.cabinet .tp, .cabinet .bm {
  width:9em;
  height:6em;
}
.cabinet .face {
  background-color:#FFFFFF;
}
/* .bottom styles */
.bottom {
  transform:translate3D(0em, 1.5em, -3em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:9em;
  height:3em;
  margin:-1.5em 0 0 -4.5em;
}
.bottom .ft {
  transform:translateZ(3em);
}
.bottom .bk {
  transform:translateZ(-3em) rotateY(180deg);
}
.bottom .rt, .bottom .lt {
  width:6em;
  height:3em;
}
.bottom .tp, .bottom .bm {
  width:9em;
  height:6em;
}
.bottom .face {
  background-color:#FFFFFF;
}
/* .drawer styles */
.drawer {
  transform:translate3D(0em, 1.4em, -3em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:8.8em;
  height:2.8em;
  margin:-1.4em 0 0 -4.4em;
}
.drawer .ft {
  transform:translateZ(2.9em);
}
.drawer .bk {
  transform:translateZ(-2.9em) rotateY(180deg);
}
.drawer .rt, .drawer .lt {
  width:5.8em;
  height:2.8em;
}
.drawer .tp, .drawer .bm {
  width:8.8em;
  height:5.8em;
}
.drawer .face {
  background-color:#FFFFFF;
}
/* .wheel-back-left styles */
.wheel-back-left {
  transform:translate3D(-4em, 3.5em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:1em;
  height:1em;
  margin:-0.5em 0 0 -0.5em;
}
.wheel-back-left .tp, .wheel-back-left .bm {
  width:1em;
  height:1em;
}
.wheel-back-left .side {
  width:0.25324347439014994em;
  height:1em;
}
.wheel-back-left .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-left .face, .wheel-back-left .side {
  background-color:#FFFFFF;
}
/* .wheel-front-left styles */
.wheel-front-left {
  transform:translate3D(-4em, 3.5em, -.5em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:1em;
  height:1em;
  margin:-0.5em 0 0 -0.5em;
}
.wheel-front-left .tp, .wheel-front-left .bm {
  width:1em;
  height:1em;
}
.wheel-front-left .side {
  width:0.25324347439014994em;
  height:1em;
}
.wheel-front-left .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-left .face, .wheel-front-left .side {
  background-color:#FFFFFF;
}
/* .wheel-front-right styles */
.wheel-front-right {
  transform:translate3D(4em, 3.5em, -.5em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:1em;
  height:1em;
  margin:-0.5em 0 0 -0.5em;
}
.wheel-front-right .tp, .wheel-front-right .bm {
  width:1em;
  height:1em;
}
.wheel-front-right .side {
  width:0.25324347439014994em;
  height:1em;
}
.wheel-front-right .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.wheel-front-right .face, .wheel-front-right .side {
  background-color:#FFFFFF;
}
/* .wheel-back-right styles */
.wheel-back-right {
  transform:translate3D(4em, 3.5em, -5.5em) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
  opacity:1;
  width:1em;
  height:1em;
  margin:-0.5em 0 0 -0.5em;
}
.wheel-back-right .tp, .wheel-back-right .bm {
  width:1em;
  height:1em;
}
.wheel-back-right .side {
  width:0.25324347439014994em;
  height:1em;
}
.wheel-back-right .s0 {
  transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s1 {
  transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s2 {
  transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s3 {
  transform: rotateY(90deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s4 {
  transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s5 {
  transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s6 {
  transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s7 {
  transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s8 {
  transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s9 {
  transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s10 {
  transform: rotateY(270deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s11 {
  transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s12 {
  transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .s13 {
  transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.475em);
}
.wheel-back-right .face, .wheel-back-right .side {
  background-color:#FFFFFF;
}
/* .door,right styles */
.door, right {
  transform:translate3D(-11.009978991596638em, -0.16334033613445398em, 1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4.5em;
  height:17.8em;
  margin:-8.9em 0 0 -2.25em;
}
.door, right .ft {
  transform:translateZ(0.1em);
}
.door, right .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.door, right .rt, .door, right .lt {
  width:.2em;
  height:17.8em;
}
.door, right .tp, .door, right .bm {
  width:4.5em;
  height:.2em;
}
.door, right .face {
  background-color:#FFFFFF;
}
/* .door-left styles */
.door-left {
  transform:translate3D(-2.25em, -6.9em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4.5em;
  height:13.4em;
  margin:-6.7em 0 0 -2.25em;
}
.door-left .ft {
  transform:translateZ(0.1em);
}
.door-left .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.door-left .rt, .door-left .lt {
  width:.2em;
  height:13.4em;
}
.door-left .tp, .door-left .bm {
  width:4.5em;
  height:.2em;
}
.door-left .face {
  background-color:#FFFFFF;
}
/* .door-right styles */
.door-right {
  transform:translate3D(2.25em, -6.9em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:4.5em;
  height:13.4em;
  margin:-6.7em 0 0 -2.25em;
}
.door-right .ft {
  transform:translateZ(0.1em);
}
.door-right .bk {
  transform:translateZ(-0.1em) rotateY(180deg);
}
.door-right .rt, .door-right .lt {
  width:.2em;
  height:13.4em;
}
.door-right .tp, .door-right .bm {
  width:4.5em;
  height:.2em;
}
.door-right .face {
  background-color:#FFFFFF;
}
/* .picture-frame styles */
.picture-frame {
  transform:translate3D(0em, -6.8em, -3.15em) rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:8.8em;
  height:14.4em;
  margin:-7.2em 0 0 -4.4em;
}
.picture-frame .ft {
  transform:translateZ(0.13090310937742414em);
}
.picture-frame .bk {
  transform:translateZ(-0.13090310937742414em) rotateY(180deg);
}
.picture-frame .rt, .picture-frame .lt {
  width:0.2618062187548483em;
  height:14.4em;
}
.picture-frame .tp, .picture-frame .bm {
  width:8.8em;
  height:0.2618062187548483em;
}
.picture-frame .face {
  background-color:#FFFFFF;
}
.picture-frame .ft {
  background:url(http://orig11.deviantart.net/a0d9/f/2007/068/9/7/utah_teapot_by_sunna_no_gaara.jpg);
}
/* .cub-1 styles */
.cub-1 {
  transform:translate3D(0em, 1.5em, 0.1em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity:1;
  width:5.8em;
  height:1em;
  margin:-0.5em 0 0 -2.9em;
}
.cub-1 .ft {
  transform:translateZ(0em);
}
.cub-1 .bk {
  transform:translateZ(0em) rotateY(180deg);
}
.cub-1 .rt, .cub-1 .lt {
  width:0em;
  height:1em;
}
.cub-1 .tp, .cub-1 .bm {
  width:5.8em;
  height:0em;
}
.cub-1 .face {
  background-color:#FFFFFF;
}

/* Animations... */
.drawer{
  animation: drawerwiggle linear 1s;
  transform-origin: 50% 50%;
  -webkit-animation: drawerwiggle linear 1s;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: drawerwiggle linear 1s;
  -moz-transform-origin: 50% 50%;
  -o-animation: drawerwiggle linear 1s;
  -o-transform-origin: 50% 50%;
  -ms-animation: drawerwiggle linear 1s;
  -ms-transform-origin: 50% 50%;
}

@keyframes drawerwiggle{
  0% {
    transform:  rotate(0deg) ;
  }
  20% {
    transform:  rotate(15deg) ;
  }
  40% {
    transform:  rotate(-10deg) ;
  }
  60% {
    transform:  rotate(5deg) ;
  }
  80% {
    transform:  rotate(-5deg) ;
  }
  100% {
    transform:  rotate(0deg) ;
  }
}

@-moz-keyframes drawerwiggle{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  20% {
    -moz-transform:  rotate(15deg) ;
  }
  40% {
    -moz-transform:  rotate(-10deg) ;
  }
  60% {
    -moz-transform:  rotate(5deg) ;
  }
  80% {
    -moz-transform:  rotate(-5deg) ;
  }
  100% {
    -moz-transform:  rotate(0deg) ;
  }
}

@-webkit-keyframes drawerwiggle {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  20% {
    -webkit-transform:  rotate(15deg) ;
  }
  40% {
    -webkit-transform:  rotate(-10deg) ;
  }
  60% {
    -webkit-transform:  rotate(5deg) ;
  }
  80% {
    -webkit-transform:  rotate(-5deg) ;
  }
  100% {
    -webkit-transform:  rotate(0deg) ;
  }
}

@-o-keyframes drawerwiggle {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  20% {
    -o-transform:  rotate(15deg) ;
  }
  40% {
    -o-transform:  rotate(-10deg) ;
  }
  60% {
    -o-transform:  rotate(5deg) ;
  }
  80% {
    -o-transform:  rotate(-5deg) ;
  }
  100% {
    -o-transform:  rotate(0deg) ;
  }
}

@-ms-keyframes drawerwiggle {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  20% {
    -ms-transform:  rotate(15deg) ;
  }
  40% {
    -ms-transform:  rotate(-10deg) ;
  }
  60% {
    -ms-transform:  rotate(5deg) ;
  }
  80% {
    -ms-transform:  rotate(-5deg) ;
  }
  100% {
    -ms-transform:  rotate(0deg) ;
  }
}