

CSS 3D Geometry and Lighting - Spikes - aerotwist
http://lab.aerotwist.com/css/spikes

======
kaitnieks
I wonder which browser am I supposed to use? It doesn't seem to work in FF4,
Chrome or IE9.

~~~
aerotwist
Since CSS 3D transforms require the GPU you will need either Chrome or Safari
running on a computer which supports GPU acceleration. Chrome on Windows XP,
for example, does not allow use of the GPU by default so you wouldn't see
WebGL or CSS 3D transforms

~~~
unwind
I'm in Firefox 4 on Windows, which does support WebGL, and all I see is
blankness.

~~~
aerotwist
It's using CSS 3D transforms not WebGL :)

------
Groxx
It loses all "CSS 3D" when you do all calculations in JS, IMO.

    
    
      // add on our post drag velocity
      baseVec.x -= shapeVelY;
      baseVec.y += shapeVelX;
      
      // dampen it
      shapeVelX *= DAMPEN;
      shapeVelY *= DAMPEN;
      
      // now rotate our shape
      $shape.css({
        WebkitTransform: "translateY(-55px) scale(0.7) rotateX("+(baseVec.x)+"deg) rotateY("+(baseVec.y)+"deg)"
      });
      
      // work out the shadow darkness
      var shadowDarkness = .05 + Math.abs(Math.cos(baseVec.x * RADS) * .3);
      
      for(var s = 0; s < $shadowCont.length; s++) {
        var thisShadow = $($shadowCont[s]),
            shadScale  = thisShadow.data('scale') || 1;
        thisShadow.css({
          WebkitTransform: "translateZ(-150px) translateY(75px) rotateX(90deg) scale("+((.9-(shadowDarkness *.7)) * shadScale)+")",
          background: "-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 200, from(rgba(30,4,22,"+shadowDarkness+")), to(rgba(60,9,44,0)))"
        });
      }
      
      ...
    

source here: <http://lab.aerotwist.com/css/spikes/js/CSS3Spikes.js> (I cleaned
this bit up a tiny bit for HN-friendly display)

Impressive, but a bit (perhaps unintentionally) misleading.

~~~
aerotwist
The rendering is still done in CSS, which was the point, as opposed to using
Canvas or WebGL. I wasn't trying to do everything in CSS, since that wouldn't
actually be possible

I take your point, but however you choose to apply the CSS it's still CSS :)

