Jump to content
Search Community

Dynamic Perspective Shadows with CSS3 (3D)

cerulean test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 —CRI_69332.jpg

 

Thanks for any way forward —

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...