Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
Show geometry
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } html, body { height: 100%; } body { font: 12px/1.2 Arial; perspective: 600px; perspective: 600px; background: #666; background: linear-gradient(#222,#222,#444); color: #fff; text-align:center; } .threedee { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform-origin: 50% 50% 50%; backface-visibility: hidden; } .assembly { animation: spin 4s linear infinite; } #box-toggle:checked ~ .assembly .face { outline: 1px solid #000; background: #fff !important; backface-visibility: visible; } @keyframes spin { to { transform: rotateY(360deg) rotateZ(360deg) rotateX(720deg); } }
console.log("Event Fired") var DRUM_TEXTURE = "https://keithclark.co.uk/labs/css3-fps/textures/drum.png"; // 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());