草庐IT

javascript - 当变换改变 1px 时元素向上 100%

coder 2023-08-04 原文

我在我的元素中使用 css 3d 转换。我正在尝试对其他几个元素的包含元素应用新的转换。我还尝试在其子元素之一上使用 getBoundingClientRect。该容器中还有其他元素。当容器的 transform css 属性具有此值时:

translateZ(1026px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px)

这是 element.getBoundingClientRect().top 对于那个特定的子元素是: 77.953109741210944 根据 chrome 的开发者工具但是当我使用 elements 选项卡将 `transform 属性更改为此:

translateZ(1027px) rotateX(-90deg) rotateY(180deg) translateZ(439.001px)

element.getBoundingClientRect().top 是这样的:-75048.6484375 这可能是什么原因造成的？我没有发布任何代码，因为即使我通过控制台修改值也会发生这种情况。当我将第一个 translateZ 设置为 1000px 时，它仍然约为 77。即使它为 0，边界矩形的顶部也约为 50-100。但是当它超过 1026px 时，元素似乎跳到 top -80000 左右。然而，在视觉上，该元素看起来应该并且不会在 1027 像素处随机“跳跃”。有人可以说出可能导致这种情况的情况吗？

如果是浏览器错误或其他问题，我使用的是 chrome 32.0.1687.2 dev-m Aura

编辑:

这是一个 jsfiddle 链接:

http://jsfiddle.net/a6KxQ/2/

它将生成一个包含所有 translateZ 值和生成的 elt.getBoundingClientRect().top 值的表格。代码比较乱，但是在输出的表格中，仔细看会发现，在某些时候，top的值会随机的往下跳很远很远。然后它会迅速恢复到以前的值。很奇怪。

fiddle 可能需要很长时间才能加载。

最佳答案

如您所料，它与 perspective 有关的观点。通过增加第一个值 translateZ ，您正在使矩形更靠近您。最终它是如此接近，它已经通过了相机的点。从那时起，未旋转的形状就站在你的眼睛后面。

然后你做了一个rotateX(-90deg) .发生的事情是矩形向前倒下(朝向正 Z 方向，但在相机后面。)。现在，由于 View 的隧道是梯形的，因此您可以得到我们在这张截图中看到的内容:

在相机后面的矩形中，当它旋转时，它的一部分会旋转回到视野中。

所以 getBoundingClientRect() 实际上为您提供了形状边界的底部!现在形状被翻转了，它不理解 3D。

我希望这对你有意义。我想先联系你 :) 在投反对票之前问我，我可以详细解释。

所以，这是设计使然。您可能想限制 translateZ值小于 perspective .

编辑:

对不起，最近比较忙。我的意思是给出更详细的答复。感谢给我赏金的人。

A updated demo

围绕数字，您将做出以下观察:

  1. 当 translateZ = perspective - 150px ，边界框异常小且位置错误

  2. 当 perspective - 150px < translateZ < perspective + 150px , bounding box在应该在的对面，尺寸异常大

  3. 当 tranlateZ = perspective + 150px , 在情况 1) 中边界框再次异常小并且位置更高

  4. 以上不受perspective-origin的影响

  5. 150px 是正方形宽度/高度的一半

  6. 当 tranlateZ > perspective + 150px ，边界框又正常了!

这是为什么？

  • 在情况 1) 中，其中一条边刚好与相机/视角所在的平面相交。
  • 情况 2) 正方形与相机平面相交
  • 在案例 3) 中与案例 1) 中的边缘相对的边缘现在与相机/透视平面相交。
  • 在情况 6) 中所有的正方形都通过了相机平面

用于将 3D 坐标转换为屏幕上的 2D 坐标的投影算法没有考虑到两个 Angular 在相机前面，另外两个 Angular 在后面的事实，因此产生了错误的投影，因此尺寸错误.

这就是我所说的“它不理解 3D”的意思。我意识到这很含糊，抱歉。当所有形状都通过相机平面时，它再次起作用。

Firefox 和 Chrome 都有这个问题，但在数字上有不同的表示。可能是因为使用了不同的投影矩阵。所以我不想弄清楚究竟出了什么问题。向他们发送错误报告 :)

但实际上，您可能需要解决它。

关于javascript - 当变换改变 1px 时元素向上 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19719900/

javascript100%codetranslateZperspectivehtmlcsscss-transforms

有关javascript - 当变换改变 1px 时元素向上 100%的更多相关文章

  1. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少

  2. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  3. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  4. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  5. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  6. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  9. ruby - 使用 Nokogiri 和 Ruby 命名元素 "text" - 2

    我在尝试使用Nokogiri构建XML文档时遇到了一个小问题。我想将我的元素之一称为“文本”(请参阅​​下面粘贴代码的最底部)。通常，要创建一个新元素，我会执行类似以下的操作xml.text--但它似乎是.text是Nokogiri已经用来做其他事情的方法。因此，当我写这行时xml.textNokogiri没有创建名为的新元素但只是写了意味着成为元素内容的文本。我怎样才能让Nokogiri实际制作一个名为的元素？？builder=Nokogiri::XML::Builder.newdo|xml|xml.TEI("xmlns"=>"http://www.tei-c.org/ns/1.0"

  10. ruby - 在 factory_girl 中有没有办法获取 attributes_for 并为同一个实例元素创建？ - 2

    如果我想使用“create”构建策略创建和实例，然后想使用“attributes_for”构建策略进行验证，是否可以这样做？如果我在工厂中使用序列？在Machinistgem中有可能吗？ 最佳答案 不太确定我是否完全理解。而且我不是机械师的用户。但听起来您只是想做这样的事情。@attributes=FactoryGirl.attributes_for(:my_object)my_object=MyObject.create(@attributes)my_object.some_property.should==@attributes

随机推荐