CSS 透视变换
我正在尝试创建一个由透视地图组成的应用程序，我可以在其中添加地图标记（绝对定位的 DIV），但是我认为我在转换/3D 空间方面遇到了一些混乱。
以下面引用的小提琴为例，我希望 DIV 1 位于位置 0,0（平放时的位置 - 单击按钮），但是在其直立位置，左侧有一个小边距（这似乎是由视角值控制，所以我猜我需要以某种方式补偿这一点？）。
同样，Div2 似乎位于画布最远端的正确位置，但是，如果我将顶部/左侧值更改为 100,100，它会隐藏在画布下方 - 我是否需要在 中通过附加变换来提高标记位置？ ？轴？如果是这样，为什么这对于位于画布顶部的 Div one 来说不是问题呢？
I am trying to create an application which consists of a map in perspective to which I can add map markers (absolutely positioned DIV's) however I think I'm getting into a bit of mess with transformations/3D space.
Taking the fiddle referenced below as an example, I would expect DIV 1 to be at position 0,0 (which it is when laid flat - click the button) however in it's upright position there is a small margin on the left (this seems to be controlled by the perspective value so I'm guessing I need to compensate for this somehow?).
Equally Div2 appears to be in the correct position at the far extremes of the canvas, however if I change the top/left value to 100,100 it is hidden below the canvas - do I need to raise the markers position with an additional transform in the ?? axis? If so, why isnt this a problem for Div one which sits on top of the canvas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以使用
-webkit-transform-origin 属性（以及其他前缀）调整转换的起始位置。我不太清楚要使用什么值，但它应该有帮助。尝试将其设置为bottom看看它是如何工作的。You can adjust where the transform originates using the
-webkit-transform-origin property(and the other prefixes). I couldn't quite work out what value to use, but it should help. Try setting it tobottomto see how it works.