Java-Scripts.net

3D Cube Animation

Add depth to your webpage. This script demonstrates how to build and animate a 3D cube using CSS3 transforms, controlled by simple JavaScript class toggling.

Copy the Script

<style>
.scene { perspective: 600px; }
.cube {
  width: 100px; height: 100px; position: relative;
  transform-style: preserve-3d; transition: transform 1s;
}
.face {
  position: absolute; width: 100px; height: 100px;
  border: 1px solid #ccc; opacity: 0.8;
}
/* Positions for faces would go here (translateZ, rotateY etc) */
</style>

<script>
function rotateCube() {
  var x = Math.floor(Math.random() * 360);
  var y = Math.floor(Math.random() * 360);
  document.getElementById('cube').style.transform = 
    "rotateX(" + x + "deg) rotateY(" + y + "deg)";
}
</script>

Frequently Asked Questions

No. This uses pure CSS3 `transform-style: preserve-3d` for the rendering, which is much more efficient for simple shapes than the HTML5 Canvas element.

Yes. The faces of the cube are just HTML `div` elements, so you can place images, text, or even videos inside them.

Yes. CSS3 3D transforms are widely supported on modern mobile browsers (iOS Safari, Android Chrome) and are hardware accelerated.