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

我在处理一些CSS/JavaScript时遇到了这个数学问题，所以坐标系和尺寸都是这样标注的。我对这件事挠头已经有一段时间了，没有任何运气。也许（希望）这个解决方案对其他人来说更为明显和简单，因此任何帮助/指点都将不胜感激

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

---

变换的顺序是什么？只需跟踪红方块顶点的位置和蓝方块上对应顶点的位置，然后计算差异。变换在CSS中作为单个声明应用