Skip to content

Instantly share code, notes, and snippets.

@dermotmcguire

dermotmcguire/FN01_Cabinet_POC.markdown

Created November 17, 2015 03:25
Show Gist options
  • Save dermotmcguire/0e682a2a82f27910ee83 to your computer and use it in GitHub Desktop.
Save dermotmcguire/0e682a2a82f27910ee83 to your computer and use it in GitHub Desktop.
Download ZIP
FN01_Cabinet_POC
Raw
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>
Raw
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) ;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment