是否可以在 CSS3 或 Javascript 中将字母映射到圆柱体或球体？答案

【问题标题】：Is it possible to map letters to a cylinder or a sphere in CSS3 or Javascript?是否可以在 CSS3 或 Javascript 中将字母映射到圆柱体或球体？
【发布时间】：2012-10-26 14:04:47
【问题描述】：

我在 CSS3 中看到了一张映射到圆柱体的图片，我想知道这是否可以通过文本实现。更好的方法是将文本映射到一个球体。如果纯 CSS 无法实现，则可以选择 Javascript。

它必须在所有主流浏览器上运行，包括那些没有 -webkit- 的浏览器。

提前致谢。

【问题讨论】：

学习一切皆有可能......
我不知道解决方案，但我怀疑是否存在“全局”css 属性。通常较新的 CSS 东西需要多个 -moz- -webkit- 和 -o- 属性（它们做同样的事情但有不同的语法），以及一些用于 IE 的 JS
如果有；这将是一个非常聪明的技巧。 SVG 可能是这里唯一的选择。
Afaik，CSS3 只允许在 3 个维度上移动视图平面 - 不可能使用球体
由于无法使用 CSS，您可能想看看 how to draw 3d sphere?

标签： javascript css

【解决方案1】：

如 cmets CSS3 中所述，仅支持旋转和倾斜元素，不支持球体。

虽然您可以使用 Raphael.js 之类的东西在 SVG 中 fake a sphere，但我认为没有任何真正支持使用矢量图形进行 3D 工作。您必须自己使用一些疯狂的数学来映射/换行/倾斜文本，这甚至可能仍然不可能。

我认为你唯一真正的希望是使用像 three.js 这样的东西来创建一个实际的立方体对象。然后，您可以将文本写入隐藏的画布元素以获取文本图像，并将图像作为材质映射到立方体上，as in this example。

【讨论】：

我在 Ubuntu Linux 下的 FF 和 Chrome 浏览器都显示错误消息：“您的显卡似乎不支持 WebGL。在此处了解如何获取它。”
我正在分析 this example 并尝试将其转换为带有文本的 div...
我想你可以尝试使用蒙版和灯光效果来伪造一个球体，就像他对可乐罐图像所做的那样。 romancortes.com/ficheros/coke-can.png 不过效果可能非常微妙。他可以在他的示例中作弊，因为它是一个圆柱体，他只需水平缩放图像片段即可获得圆角效果。我不确定您如何在水平和垂直方向上获得相同的效果。您可以尝试创建一系列形成菱形形状的 div，然后遮盖锯齿状边缘。
您还需要一大堆 div 副本，因此您可以将每个副本缩放到稍微不同的宽度和高度（球体中心的最大段），然后将它们排成一行一切都按照他对编号 div 的处理方式进行。
克里斯：确实，我开始思考可乐罐和一堆 div 的方向。但是由于我的客户不坚持这个功能，我可能会默默地放弃它：别管了。