使用3D变换隐藏元素

Question

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

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

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

Answer 1

您只需插入-即可解决此问题。

请改为：

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

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