是否可以在CSS3或Javascript中将字母映射到圆柱体或球体? [英] Is it possible to map letters to a cylinder or a sphere in CSS3 or Javascript?

问题描述

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

I saw a picture mapped to a cylinder in CSS3 and I was wondering if this is possible with a text. Even better would be to map the text to a sphere. If it is not possible with pure CSS, Javascript could be an option.

它必须在所有主要的浏览器上运行，也必须在没有-webkit-的浏览器上运行.

It must run on all major browsers, also those not having the -webkit- stuff.

谢谢.

推荐答案

如注释中所述，CSS3仅支持旋转和倾斜元素，不支持球体.

As mentioned in the comments CSS3 only supports rotating and skewing elements, and doesn't have any support for spheres.

尽管您可以使用Raphael.js之类的东西在SVG中伪造一个球，但我不认为对于使用矢量图形进行3D制作，确实有任何支持.您必须使用一些疯狂的数学来自己映射/包装/倾斜文本，但这仍然是不可能的.

Although you can fake a sphere in SVG using something like Raphael.js, i don't think there's any real support for doing 3D stuff using Vector graphics. You'd have to map/wrap/skew the text yourself using some crazy math, and it still might not even be possible.

我认为您唯一真正的希望是使用诸如three.js之类的东西来创建实际的多维数据集对象.然后，您可以将文本写入隐藏的canvas元素以获取文本图像，然后将图像作为材质映射到多维数据集，

I think your only real hope is to use something like three.js to create an actual cube object. Then you could write your text to a hidden canvas element to get an image of the text, and map the image onto the cube as a material, as in this example.

这篇关于是否可以在CSS3或Javascript中将字母映射到圆柱体或球体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！