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

Posted 2023-03-06

【中文标题】CSS 3D 将 div 转换为弯曲的拱形

【英文标题】：CSS 3D transform a div into a bent arch shape

【发布时间】：2015-09-12 10:55:17

【问题描述】：

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

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

【问题讨论】：

你可以用大的白色圆圈和 z-index 做类似的事情，但 div 的内容将保持不变。你需要 html5 画布来得到你想要的东西。

我最近回答了类似的问题。见***.com/a/30817828/1926369

@vals 是纯巫术，值得点赞。

Html/css/js 在这里失败了，还有很多其他地方都超出了word文档的范围。

jsfiddle.net/AbdiasSoftware/e8hZy

【参考方案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 感觉的最佳方法。