网页上的 3D 透视文本
如何使用 Javascript/CSS 实现 3D 文本透视转换。
使用 Javascript/CSS 外部库的解决方案也是可能的
How can I achieve 3D text transformations in perspective using Javascript/CSS.
Solutions using external libraries of Javascript/CSS are also possible
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
目前，只有 Safari 才能实现带有透视效果的 CSS 转换。唉，Chrome 虽然基于 Webkit，并且似乎支持正确的 CSS 属性，将不应用透视变换。 它们将在某个时候在 Firefox 上得到支持，但 IE 则不知道。
您唯一的其他选择实际上是
。然而，就像 CSS 变换一样，canvas API 只提供“2D”仿射变换（缩放、旋转、倾斜）的功能。有了这个，您可以获得的最好结果是等轴测视角，因为只需倾斜即可实现。然而，由于画布可以让您对图像进行像素级控制，因此您可以伪造透视图，尽管这样做很复杂。最明显的方法是使用 putImageData 函数并使用 3D 透视变换矩阵计算每个像素。显然，您需要了解一些有关线性代数和三角学的知识。无论您的数学技能如何，在如此低的水平上进行 3D 变换在性能方面都是极其昂贵的，并且不同浏览器之间的差异很大（Chrome 是迄今为止最快的，Firefox 会以相当低的帧速率运行，而 Safari 则处于中间位置） ）。
一种更好的解决方案性能明智，但同样复杂且数学密集，是使用
drawImage一次一行地在画布上绘制图像/文本/任何内容，并在每次更改画布的缩放变换值之间。这正是用于了解 SNES 模式 7 的方法，该模式本身仅支持 2D 转换。这里详细介绍了另一种方法。
正如你可以想象的那样，这一切都不是微不足道的，并且性能充其量也不稳定。因此，如果您不愿意深入研究大量线性代数、三角学和画布 API 文档，我想说您非常不走运。任何按您要求执行的 JS 库都会受到所有这些限制。我知道有一些演示，但没有一个可以真正被称为库（尽管如果有人知道某些东西，我很乐意纠正）。
如果有人对我提到的任何方法的具体细节感兴趣，我很乐意尝试更全面地阐述它们。同时，您可以尝试我自己的演示，该演示结合了我指定的前两种技术。
http://bigmooworld.com/pwings/pilotwings/pilotwings.html
你们中的一些人可能认识它...
使用 WASD 进行平移，向上/向下进行缩放，向右/向左进行旋转，使用 Q/E 来改变视角。请随意仔细阅读这些代码，但请注意，它的组织或注释不完善，而且大部分都是被丢弃的垃圾代码。
所以无论如何我的答案是......是的，这是可能的，在 Safari 中很容易，或者在其他浏览器中付出很大的努力和劣质的性能（并且 IE 中可能有一种方法，但我不知道如何）。
CSS transformations with perspective are only possible with Safari at this point. Alas Chrome, while based on Webkit, and seemingly supporting the proper CSS attributes, will not apply perspective transformations. They will be supported at some point on Firefox, no clue about IE.
Your only other option really is
<canvas>. However, just like with CSS transforms, the canvas API only provides functions for "2D" affine transformations (scaling, rotation, skewing). With this the best you can get is an isometric perspective, as that can be achieved with just skewing.However, since canvas gives you pixel level control over the image, you can fake perspective, though doing so is complex. The obvious way is to use the
putImageDatafunction and calculate each pixel using a 3D perspective transform matrix. Obviously you'd need to know some things about linear algebra and trigonometry. Regardless of your math skills, doing 3d transforms at such a low level is extremely costly performance wise, and highly variable between different browsers (Chrome is the fastest by far, Firefox will chug along at fairly low framerates, and Safari is somewhere in the middle).A better solution performance wise, but similarly complex and math intensive, is to use
drawImageto paint an image/text/whatever to canvas one line at a time, and in between each change the canvas's scaling transform values. This is exactly the method that was used to get perspective on the SNES with mode 7 that natively only supported 2D transformations.Another method is detailed here.
As you can imagine none of this is trivial, and performance is spotty at best. So if you are not willing to delve into a mass of linear algebra, trigonometry and canvas API documentation, I would say you are pretty much out of luck. Any JS library that does as you ask is subject to all these limitations. I know of a handful of demos out there, but none that could really be called a library (though if someone knows of something I'd be happy to be corrected).
If anyone is interested in the nutty details of any of the approaches I mentioned, I'd be happy to try to lay them out more comprehensively. In the mean time, you can play around with my own demo that uses a combination of the first two techniques I specified.
http://bigmooworld.com/pwings/pilotwings/pilotwings.html
Some of you might recognize it...
Use WASD to pan, up/down to zoom, right/left to rotate, and Q/E to change perspective. Feel free to peruse the code, but be forewarned that it is not well organized or commented, and most of it is discarded junk code.
So anyway my answer is...Yes it is possible, easily in Safari, or with a great deal of effort and shoddy performance in other browsers (and there is probably a way in IE but I have no clue about how).