所以我制作了这个从鸟瞰图中显示行星及其卫星的网站。现在，我知道冥王星不是一颗行星，但我把它包括在内，因为它有很多卫星，因为这个事实非常有趣：冥王星及其最大的卫星Charon绕着冥王星表面外的一个点进行轨道运行。因此，他们在相同的轨道周期内进行这种舞蹈，它们彼此之间的距离始终相同，并且始终位于轨道的两侧（因此它们之间的距离始终最大化）。好的，足够的科学讲座，对我的问题。
在这里查看网站：http://distantfuturejosh.com/endomoons/。你必须按几次右箭头才能落在冥王星上，然后一旦你这样做，按下“锁定”图标（这会限制刻度）并放大以便更好地查看冥王星和Charon NOT的正确配置。如果您点击屏幕上的任何位置，它们将开始围绕您的观看轨道运行。
我可以通过做一点绝对定位和边距来将冥王星投射到他轨道的另一侧，但问题是当用户按比例缩放时，必要的保证金数量会发生变化。我可以用if语句解决这个问题，但我宁愿不编写每次检查行星（矮行星）是不是冥王星的代码。
我想用CSS转换来解决这个问题。问题是，当我应用transform: rotate(180deg);（带有适当的前缀）时，它不需要。 Inspect元素没有显示它被覆盖（它没有被划掉）但它只是没有让步。我不知道是什么导致它失败，因此我不知道如何解决它。
答案 0 :(得分：0)
如果我正确理解了这个问题，你想把冥王星移到它轨道的另一侧。我建议删除计算出的margin-top和margin-left并使用百分比代替，因为它会更好地扩展。删除计算的边距后尝试以下操作：
#Pluto {
margin-top: 100%;
transform: translate(-50%, -50%); /* add vendor prefixed ones as well */
}
更新是您网站的简化版本的工作演示。我使用em来表示长度。这样您只需更改JS中的font-size（甚至在浏览器中）即可放大/缩小。我听到你对四舍五入的关注，我不是百分百肯定，但我认为无论如何，圆形长度的浏览器都会围绕你的2244.608px。