我有一个非常复杂的网站,基于CSS3构建,并使用了html元素进行3D变形、旋转、翻转和扭曲等操作。
我正试图找出其中一个元素在屏幕上的位置,但是找不到任何方法来实现。我想知道是否有任何巧妙的想法。
或者,如果有人能够解释-webkit-perspective
背后的数学原理,那我就可以弄清楚如何建模,从而确定位置。
我有一个非常复杂的网站,基于CSS3构建,并使用了html元素进行3D变形、旋转、翻转和扭曲等操作。
我正试图找出其中一个元素在屏幕上的位置,但是找不到任何方法来实现。我想知道是否有任何巧妙的想法。
或者,如果有人能够解释-webkit-perspective
背后的数学原理,那我就可以弄清楚如何建模,从而确定位置。
使用getBoundingClientRect是个好主意,但它只会给你包含形状的矩形的坐标,而不是四个角的精确坐标,即左上、右下、左下、右上。
你只能通过将每个非变换坐标应用javascript变换来实现这一点。
getBoundingClientRect X transform metrix
的脚本。 - pery mimon问题在于,CSS3 变换实际上并没有以任何方式改变元素的位置。当然,浏览器“知道”它们被重新定位了,因为它们呈现出来了,但是这些信息不会被提供回 DOM/API。
我所能想到的唯一办法就是根据变换自己计算位置,因为这些是“简单”的矩阵变换。
不幸的是,代数课已经过去太久了,我无法再告诉你如何做到这一点——只能告诉你这是可能的。
-webkit-perspective
背后的数学原理。它的作用有点像焦距控制,但是-webkit-perspective:500
实际上代表什么?!? - user578895
transform-style: preserve-3d
,它将更改从这些函数返回的值。使其遵守3D世界而不是2D。 - pery mimon