CSS 3D将div转换为弯曲的拱形

Question

我想知道是否可以像棋子一样塑造div，最好是使用CSS，Jquery等，但不能使用闪光灯。
我也想知道它是否会使用太多的RAM或CPU，如果没有办法，如果有办法让它至少看起来像它。 这是我想要的一个例子：

我已经看到了答案，我在想，用HTML5 Canvas如何做到这一点？也可以用代码生成的SVG来完成它？

Answer 1

您可以使用具有边框半径的div，并在希望使用JQuery进行拱形时显示它们。看一下我的jsfiddle的例子：http://jsfiddle.net/ECHWb/530/点击div使其成为一个拱门。

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

Answer 2

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

Answer 3

另一种解决方案可能是通过并排多个div来实现这一结果并放置好方法......

我正在使用它制作360度全景图，看起来很逼真3D。

不幸的是我暂时无法提供演示... 但这可能是获得真实3D感觉的最佳方法。