3 ms·

CSS 3D Geometry and Lighting - Spikes

4 points by aerotwist 15y ago

kaitnieks 15y ago
I wonder which browser am I supposed to use? It doesn't seem to work in FF4, Chrome or IE9.
- tomstuart 15y ago
  Sounds like you're on Windows, but FWIW it works in Safari on OS X.
  - robin_reala 15y ago
    and Safari on iOS.
- aerotwist 15y ago
  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 15y ago
    I'm in Firefox 4 on Windows, which does support WebGL, and all I see is blankness.
    - aerotwist 15y ago
      It's using CSS 3D transforms not WebGL :)
Groxx 15y ago
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 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 15y ago
  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 :)

4 points by aerotwist 15y ago

kaitnieks 15y ago

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

tomstuart 15y ago
Sounds like you're on Windows, but FWIW it works in Safari on OS X.
- robin_reala 15y ago
  and Safari on iOS.
aerotwist 15y ago
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 15y ago
  I'm in Firefox 4 on Windows, which does support WebGL, and all I see is blankness.
  - aerotwist 15y ago
    It's using CSS 3D transforms not WebGL :)

Groxx 15y ago

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 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 15y ago
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 :)