Dynamic Perspective Shadows with CSS3 (3D)

[cerulean 3 Likes (Newbie)]

Has anyone done any work with Greensock 3D transforms to create dynamic perspective shadows with CSS3?  I was thinking this morning that it would most likely not be that difficult, but my 3D math/trigonometry skills are somewhat dormant.

 

What I mean is shadows that will fall on a flat horizontal plane ("the ground") behind the object, as at sunset, and will, as the object moves in x and z directions (not y, as that seems complicated).  The shadows would respond to a central light point (perhaps the center of the screen) 

 

Something like this image —

 

Thanks for any way forward —

[Jonathan 5,176 Likes (Superhero)]

Hello cerulean,

 

You can try different CSS Transforms to achieve perspective shadows.. here is an example of just a simple box shadow, that uses skew() and :before pseudo element.

 

http://codepen.io/jonathan/details/GdAHc

 

This is just a simple box, to do more of a fluid shapes like in your example image above .. you can try using a blackened out image of the shape applied to the :before CSS rule instead of a background-color.. or better yet use svg or canvas to create the image and black shadows that take up the shape. Then use GSAP to animate the elements direction of the shadow using CSS or attribute values for SVG and/or properties for CANVAS.

 

transform - CSS | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

 

Using CSS transforms:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

 

Hope this helps?

[cerulean 3 Likes (Newbie)]

Thanks!  That's very helpful!