leapmotion-ts
Version:
TypeScript framework for Leap Motion.
135 lines (129 loc) • 4.36 kB
HTML
<html>
<head>
<title>DOM Visualizer - Leap</title>
<script data-main="DOMVisualizer" src="require.js" type="text/javascript"></script>
<style>
*,*:before,*:after {
margin: 0;
padding: 0;
border: 0;
-webkit-box-sizing: border-box;
}
button {
padding: .5em;
}
#app {
position: absolute;
width: 100%;
height: 100%;
font-size: 200%;
overflow: hidden;
background-color: #101010;
-webkit-perspective: 1000;
}
#scene,
#scene:before {
position: absolute;
left: 50%;
top: 50%;
width: 40em;
height: 40em;
margin: -20em 0 0 -20em;
border: 4px solid #A0A0A0;
background-color: rgba(255,255,255,.1);
background-image:
-webkit-linear-gradient(rgba(255,255,255,.4) .1em, transparent .1em),
-webkit-linear-gradient(0deg, rgba(255,255,255,.4) .1em, transparent .1em),
-webkit-linear-gradient(rgba(255,255,255,.3) .05em, transparent .05em),
-webkit-linear-gradient(0deg, rgba(255,255,255,.3) .05em, transparent .05em);
background-size: 5em 5em, 5em 5em, 1em 1em, 1em 1em;
background-position: -.1em -.1em, -.1em -.1em, -.05em -.05em, -.05em -.05em;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(75deg);
}
#scene {
-webkit-transform: rotateX(75deg);
}
#scene:before {
content: '';
-webkit-transform: rotateX(90deg) translateZ(19.5em) translateY(20em);
}
.cube {
background-color: red;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateX(19.5em) translateY(19.5em) translateZ(0em);
}
.finger,
.sphere {
position: absolute;
left: 50%;
top: 50%;
width: 1em;
height: 1em;
margin: -.5em 0 0 -.5em;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateX(14.5em) translateY(14.5em) translateZ(0);
}
.finger {
opacity: .8;
height: 3em;
}
.sphere {
opacity: .3;
display: none;
font-size: 100px;
}
.show-hands .sphere {
display: block;
}
.face {
position: absolute;
width: 1em;
height: 1em;
background-color: inherit;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
}
.cube .face.tp { -webkit-transform: translateZ(1em); }
.cube .face.ft { -webkit-transform: rotateX(90deg) translateZ(-1em); }
.cube .face.bk { -webkit-transform: rotateX(90deg); }
.cube .face.lt { -webkit-transform: rotateY(90deg) translateX(-1em); }
.cube .face.rt { -webkit-transform: rotateY(90deg) translateX(-1em) translateZ(1em); }
.finger .face.tp { -webkit-transform: translateZ(1em); height: 3em; }
.finger .face.ft { -webkit-transform: rotateX(90deg) translateZ(-3em); }
.finger .face.bk { -webkit-transform: rotateX(90deg); }
.finger .face.lt { -webkit-transform: rotateY(90deg) translateX(-1em); height: 3em;}
.finger .face.rt { -webkit-transform: rotateY(90deg) translateX(-1em) translateZ(1em); height: 3em;}
</style>
</head>
<body>
<div id="app" class="show-hands">
<button id="showHands">Show Hands</button>
<button id="hideHands">hide Hands</button>
<div id="scene">
<div id="cube" class="cube">
<div class="face tp"></div>
<div class="face lt"></div>
<div class="face rt"></div>
<div class="face ft"></div>
<div class="face bk"></div>
</div>
<div id="finger" class="cube finger">
<div class="face tp"></div>
<div class="face lt"></div>
<div class="face rt"></div>
<div class="face ft"></div>
<div class="face bk"></div>
</div>
<div id="sphere" class="cube sphere">
<div class="face tp"></div>
<div class="face lt"></div>
<div class="face rt"></div>
<div class="face ft"></div>
<div class="face bk"></div>
</div>
</div>
</div>
</body>
</html>