CODEWITHSUNDEEP
jqueryhtmlcsscanvassvg
Miguel Vieira
Miguel Vieira

Reputation: 154

CSS 3D transform a div into a bent arch shape

I want to know if is it possible to shape a div like an arch, preferrably with CSS, Jquery and such, but not with flash.
I also want to know if it's going to use too much RAM or CPU and if there isn't a way, if there is a way to make it at least look like it. Here's an example of what I want:

enter image description here

I've seen the answers, and I was thinking, how would that be done with HTML5 Canvas? Also, maybe could it be done with code-generated SVG?

Upvotes: 5

Views: 3631

Answers (3)

TOPKAT
TOPKAT

Reputation: 8688

Another solution could be to achieve that result with multiple divs side by side and placed the good way...

I'm working with that to make a 360 view panorama to seem realistic 3D.

Unfortunately i can not provide a demo for now... but that can be the best approach to obtain a real 3d feeling.

Upvotes: 1

loli
loli

Reputation: 1068

You can use divs with border radius and reveal them when you want the arch shape to happen using JQuery. Look at my jsfiddle for an example : http://jsfiddle.net/ECHWb/530/ Click on the div to make it an arch.

   $('#center').click(function(){
      $('#top').animate({height: "50px"});
      $('#bottom').animate({height: "50px"});
   });

Upvotes: 3

Charlie Wynn
Charlie Wynn

Reputation: 933

Using CSS? no.. can't be done (yet) CSS just allows linear transformations (skew, scale, rotate)

Upvotes: 3

Related Questions