使用 3D 变换隐藏元素

Question

在隐藏或显示 div 时，不要使用 display:none 和 display:block， 我决定使用 CSS 转换 来完成这项任务，因为它在 iOS/Android WebApp 中运行得更快、更流畅。

基本上，我通过使用transform: translate(0px,0px)显示一个 div，并通过transform:translate(100000px,100000px)隐藏它

现在这在 iPhone 上可以正常工作，但在 iPad（或台式机）上却不能正常工作。我得到一个巨大的垂直滚动条（可能是由于翻译），overflow:hidden 似乎也没有帮助。任何想法表示赞赏。你们是如何实现这个translate-for-hiding-elements-solution的？

Answer 1

您可以通过简单地插入 - 来解决此问题。

改为这样做：

transform:translate(-100000px,-100000px); /*Both negative values*/

这样，您将它“向后”放在页面中，滚动条不会显示，但它仍然会存在。它与当前方法相同，但只是朝不同的方向前进并防止滚动条。