Ora*_*ind 2 html javascript css 3d transformation
如何使用Javascript/CSS在透视图中实现3D文本转换.
使用Javascript/CSS外部库的解决方案也是可能的
此时只能使用Safari进行带透视的CSS转换.Alas Chrome虽然基于Webkit,并且似乎支持正确的CSS属性,但不会应用透视转换.他们将在Firefox上得到支持,对IE没有任何线索.
你唯一的另一个选择是<canvas>.然而,就像CSS变换一样,canvas API仅提供"2D"仿射变换(缩放,旋转,倾斜)的功能.有了这个,你可以得到的最好的是等距视角,因为只需倾斜即可实现.
但是,由于画布可以对图像进行像素级控制,因此您可以伪造视角,但这样做很复杂.显而易见的方法是使用该putImageData函数并使用3D透视变换矩阵计算每个像素.显然你需要了解线性代数和三角学的一些东西.无论你的数学技能如何,在如此低的水平上进行3D变换都是非常昂贵的性能,并且在不同的浏览器之间变化很大(Chrome是迄今为止最快的,Firefox会以相当低的帧速率进行调整,Safari在中间的某个地方).
一个更好的解决方案性能,但同样复杂和数学密集,是用于drawImage绘制图像/文本/无论什么画布一行一行,并在每个之间更改画布的缩放变换值.这正是用于通过模式7获取SNES视角的方法,模式7本身仅支持2D变换.
你可以想象这一切都不是微不足道的,而且性能充其量只是参差不齐.因此,如果你不愿意深入研究大量的线性代数,三角函数和画布API文档,我会说你几乎没有运气.您提出的任何JS库都受到所有这些限制.我知道那里有一些演示,但没有一个可以真正称为图书馆(尽管如果有人知道我会乐意纠正的话).
如果有人对我提到的任何方法的坚果细节感兴趣,我会很乐意尝试更全面地阐述它们.与此同时,您可以使用我自己的演示,它使用我指定的前两种技术的组合.
http://bigmooworld.com/pwings/pilotwings/pilotwings.html
有些人可能会认出来......
使用WASD平移,上/下缩放,左/右旋转和Q/E更改透视.随意仔细阅读代码,但要预先警告它没有很好的组织或评论,而且大多数都是废弃的垃圾代码.
所以无论如何我的答案是......是的,它很可能,很容易在Safari中,或者在其他浏览器中付出很大的努力和劣质的表现(在IE中可能有一种方法,但我不知道如何).