如何像在二维平面上使用“相机”一样为页面设置动画，特别是平移和缩放？

Question

我做了一个作业，需要创建一个3x3的矩形网格，一个人可以单击其中的一个矩形，页面会放大到该矩形，因此现在是屏幕填充。
我已经通过仅使用他们的动画系统并执行transform: scale(3)和translateX / translateY来完成在Angular 6中的工作，这取决于单击了哪个矩形。因此，那里没有问题。 （请参见下面的gif）

但是，我还需要创建2或3个矩形，这些矩形在显示网格之前显示。因此，当用户访问页面时，他首先会看到1个矩形，填满了整个屏幕，单击“下一步”，然后看到了网格。

基本上，我希望对我的DOM有一个“自顶向下”的视图，能够缩放其中一个矩形或缩小并查看网格。

我当时正在考虑放弃DOM并使用three.js或pixi.js，但是由于我的期限很紧，所以我想到了要问问大师您的想法最好。

那么，创建一整堆矩形并能够在它们之间放大，缩小和移动的最佳方法是什么？提前非常感谢！

请，如果您需要更多信息，请发表评论：）