Hi Wesley, I'm not sure what you want, it really depends on the kind of reflection, and the movement of the elements, but if you want a simple reflection simulation (like reflecting 2d images, not 3d, on an horizontal plane, for instance) you have the negative scale transform to invert the image (or for some browsers the reflect), opacity variation or even masks. Of course the reflection needs to follow the elements transforms, and be aware that it may turn the animations jumpy on some browsers or platforms due to css rendering times. You can check this example: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/
If you use svg you also have svg filters to simulate reflections without repeating the code. (With svg it may be safer to use js then css inside the svg) And also, there are some awesome javascript libraries like raphael ( http://raphaeljs.com/) that integrate html5, css and js that can help you do just about anything you think of... hope it helps, isabel On Sun, Jun 23, 2013 at 8:59 PM, Wesley Acheson <[email protected]>wrote: > Hi I have a page with elements moving via css transitions. > > I would like to have a reflection map effect where by as the elements move > they are either overlaid with an element that has a partially transparent > image as a background. Or alternatively the elements are partially > transparent themselves and they clip a background image on an ancestor > element. This would give the illusion that they are reflective. > > What's not possible though is to manipulate the reflection via JS as the > movement is in css and thus I don't know the exact position. > > Is this possible in css 3? I don't mind using proprietary extensions. > > Even a background image that was fixed to the page would work. > > Wes > ______________________________________________________________________ > css-discuss [[email protected]] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
