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!

6 Comments…

Fun with CSS Transforms in Firefox and Webkit

published:

2009.02.17

topics:

css

javascript

mobile

WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. The Firefox 3.1 betas also now have CSS transformations. These CSS properties can also be animated with JavaScript, although finding documentation for how to do it in Firefox 3.1 was a bit of a hassle. Let me show you how it is done.

Update: CSS Transforms are now available in Safari, Chrome, Firefox 3.5+, IE9+, and Opera. Check out my patch that enables setting and animating CSS Transforms with jQuery.

Continue Reading Post and 22 Comments…