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

Question

我有一个任务，我需要创建一个 3x3 的矩形网格，一个人可以单击其中一个矩形，页面会放大该矩形，所以它现在是屏幕填充。
我只需使用他们的动画系统并执行transform: scale(3)和translateX/就可以在 Angular 6 中工作translateY，具体取决于单击了哪个矩形。所以，那里没有问题。（见下图）

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

基本上，我想要一个“自上而下”的 DOM 视图，能够缩放其中一个矩形或缩小并查看网格。

我正在考虑放弃 DOM 并使用 three.js 或 pixi.js，但由于我的截止日期非常紧迫，所以我想来这里问问你的大师你认为什么是最好的。

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

请，如果您需要更多信息，请发表评论:)

标签： javascripthtmlangularanimationangular-animations