Skip to content

Instantly share code, notes, and snippets.

@saki007ster

saki007ster/dabblet.css

Created March 2, 2013 02:26
Show Gist options
  • Save saki007ster/5069425 to your computer and use it in GitHub Desktop.
Save saki007ster/5069425 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
html, body {
height: 100%;
}
body {
font: 12px/1.2 Arial;
-webkit-perspective: 600px;
-webkit-perspective: 600px;
background: #666;
background: -webkit-linear-gradient(#222,#222,#444);
color: #fff;
text-align:center;
}
.threedee {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 50% 50% 50%;
-webkit-backface-visibility: hidden;
}
.assembly {
-webkit-animation: spin 4s linear infinite;
}
#box-toggle:checked ~ .assembly .face {
outline: 1px solid #000;
background: #fff !important;
-webkit-backface-visibility: visible;
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotateY(360deg) rotateZ(360deg) rotateX(720deg);
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<input id="box-toggle" type="checkbox">
<label for="box-toggle">Show geometry</label>
Raw
dabblet.js
<!--=========================================-->
var DRUM_TEXTURE = "";
// Assembiles are for grouping faces and other assembiles
function createAssembly() {
var assembly = document.createElement("div");
assembly.className = "threedee assembly";
return assembly;
}
function createFace(w, h, x, y, z, rx, ry, rz, tsrc, tx, ty) {
var face = document.createElement("div");
face.className = "threedee face";
face.style.cssText = PrefixFree.prefixCSS(
"background: url(" + tsrc + ") -" + tx.toFixed(2) + "px " + ty.toFixed(2) + "px;" +
"width:" + w.toFixed(2) + "px;" +
"height:" + h.toFixed(2) + "px;" +
"margin-top: -" + (h / 2).toFixed(2) + "px;" +
"margin-left: -" + (w / 2).toFixed(2) + "px;" +
"transform: translate3d(" + x.toFixed(2) + "px," + y.toFixed(2) + "px," + z.toFixed(2) + "px)" +
"rotateX(" + rx.toFixed(2) + "rad) rotateY(" + ry.toFixed(2) + "rad) rotateY(" + rz.toFixed(2) + "rad);");
return face;
}
function createTube(dia, height, sides, texture) {
var tube = createAssembly();
var sideAngle = (Math.PI / sides) * 2;
var sideLen = dia * Math.tan(Math.PI/sides);
for (var c = 0; c < sides; c++) {
var x = Math.sin(sideAngle * c) * dia / 2;
var z = Math.cos(sideAngle * c) * dia / 2;
var ry = Math.atan2(x, z);
tube.appendChild(createFace(sideLen + 1, height, x, 0, z, 0, ry, 0, texture, sideLen * c, 0));
}
return tube;
}
function createBarrel() {
var barrel = createTube(100, 196, 20, DRUM_TEXTURE);
barrel.appendChild(createFace(100, 100, 0, -98, 0, Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100));
barrel.appendChild(createFace(100, 100, 0, 98, 0, -Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100));
return barrel;
}
document.body.appendChild(createBarrel());
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment