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

【问题标题】：CSS 3D transform a div into a bent arch shapeCSS 3D 将 div 转换为弯曲的拱形
【发布时间】：2015-09-12 10:55:17
【问题描述】：

我想知道是否可以将 div 塑造成拱形，最好使用 CSS、Jquery 等，但不能使用 flash。
我还想知道它是否会使用过多的 RAM 或 CPU，如果没有办法，是否有办法让它至少看起来像它。这是我想要的一个例子：

我已经看到了答案，我在想，如何使用 HTML5 Canvas 来完成？另外，也许可以用代码生成的 SVG 来完成？

【问题讨论】：

【解决方案1】：

您可以使用带边框半径的 div，并在您希望使用 JQuery 生成拱形时显示它们。以我的 jsfiddle 为例：http://jsfiddle.net/ECHWb/530/ 点击 div 使其成为拱形。

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

【讨论】：

【解决方案2】：

使用 CSS？不.. （还）不能完成 CSS 只允许线性变换（倾斜、缩放、旋转）

【讨论】：

【解决方案3】：

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

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

很遗憾，我现在无法提供演示... 但这可能是获得真实 3D 感觉的最佳方法。

【讨论】：