Bas*_*asj 14 css transform css3 css-transforms
对于我的项目areallybigpage.com(*),我试图看看我们能用CSS做多远transform: scale(...).
这适用于正常大小的文本:
#id1 { position: absolute; transform-origin: 0 0; transform: scale(10000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.0001);}<div id="id2"><div id="id1">Bonjour</div></div> 但这似乎太多了,不再显示任何东西(测试Firefox 32.0/Win7,笔记本电脑/少数硬件加速):
#id1 { position: absolute; transform-origin: 0 0; transform: scale(100000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.00001);}<div id="id2"><div id="id1">Bonjour</div></div> CSS3的规模是否有限制transform: scale(...)？
我们如何进一步推动这一限制？
(*):由于此问题中描述的限制,我目前不在此页面上使用 transform: scale(...),但我想在本网站的未来版本中使用它.
偏离主题:如果你缩放得足够远PgUp,你很容易陷入1.79e+308浮动限制问题.(但这是另一个问题)
我不认为这是浏览器的问题，而更多地与运行它的电脑有关。
硬件加速/图形加速将在页面的显示方式中发挥重要作用，因此您可能需要将其纳入您的“页面”中。
你们中的许多人可能已经知道这一点，但对于其他人来说，这里有一个可能对您有用的快速提示。
快速提示：如果您使用 Chrome 或 Chromium 浏览器并且禁用了显卡的硬件加速，您可以尝试强制其获得更好的视频播放性能（例如在 YouTube 上）以及对 3D 地球视图等功能的支持在新的谷歌地图中。
要检查您的 Chrome / Chromium 浏览器是否使用硬件加速，请打开一个新选项卡，输入：（
"chrome://gpu"不带引号）并在“图形功能状态”下查看 - 所有（或至少大部分）功能应显示“硬件加速”。查看更多...
您的显卡在渲染速度等方面也发挥着巨大作用，因此我不会完全避免使用transform: scale(...)，但会向所有访问者提及“为了获得最佳结果，允许硬件加速并确保您的图形驱动程序最新...'
但实际上，你需要这种能力吗？你不能使用不同的方法吗？（例如，如果您使用这个想法来“生成背景效果”，您是否可以不使用 svg/伪效果/等？）。
总之，我不认为这是一个错误，但我认为这将是一种查看“谁通过浏览器/电脑组合获得更好的硬件加速”/“图形能力”的方式。
进一步阅读