CSS 3D Geometry and Lighting - 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

[tomstuart]

Sounds like you're on Windows, but FWIW it works in Safari on OS X.

[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 :)