确定正确的计算以保持具有不同旋转中心的两个正方形之间的视觉精确度

Question

我在处理一些CSS / JavaScript时遇到了这个数学问题，所以坐标系和尺寸都是这样注明的。我已经在这一段时间里摸不着头脑，并且没有任何运气。也许（希望）解决方案对其他人来说更加明显和简单，所以任何帮助/指针都会非常感激。

我基本上有两个相同大小，位置和旋转方向相同的正方形。两个正方形之间的唯一区别是变换原点属性，AKA是旋转的中心点。我试图计算/弄清楚我可以应用于蓝色方块的翻译是什么，以便它与红色方块完美重叠。这是一个包含更多上下文的图表：