CSS3 Demo: 3D Interactive Galaxy
- published:
- 2010.07.28
- topics:
- css
- javascript
- mobile
- video
Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.
Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.
Take a look at my rotate function:
function rotate()
{
volumeEl.style.WebkitTransform = 'rotateX(' + rotX + 'deg)'
+ ' rotateY(' + -rotY + 'deg)'
+ ' scale3d(' + scale + ', ' + scale + ', ' + scale + ')';
i = starSpans.length;
while (i--)
{
starSpans[i].style.WebkitTransform = 'rotateY(' + rotY + 'deg)'
+ ' rotateX(' + -rotX + 'deg)';
}
}
The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!