How to implement a 3D Wall curve with jQuery or js

Question

The effect that I want to realize, can only be seen on the website below: http://www.designasaurus.co.uk/page2/page9/page9.html

I really want to implement this effect, mainly using jQuery / js in combination with html and css. And I will put these resources under the assets my Android project, so I can view this effect on my Android devices. Hoping someone can give me some tips or links to sites to figure this out, or you can just tell me that: hey buddy! u cann't implement this in your android project.

Answer 1

Edit: There is no luck in the Android browser. However, before WebGL, I would look at canvas conversion methods:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

Start with an example of scale.

They should be less bleeding than WebGL.

/ Edit

Honestly, I am a little behind the latest CSS3 stuff, but it looks like CSS transformations will fit the bill.

I assume that the default Android browsers are pretty much Chrome. It looks like you can find some examples of how to do this with CSS here. See the bottommost example.

http://css3.bradshawenterprises.com/transforms/

Not sure how smooth it will go with the background image.

For more control, you'll probably want to look into webGL, which still remains pretty bleeding, but no more than the latest CSS3, but CSS3 may be all you need here.