复杂的CSS转换父视角

Question

我试图做一些类似互动版本的事情：

这并不容易，因为我想让它完全响应，并且它应该在点击时缩放项目。

我有3个想法： 1）放入容器中的每个物品分别进行转换，然后单击它即可反转＆＃34;变换，居中，缩放到窗口大小的80％。这几乎是好的，但它没有响应，由于宽度百分比，我无法正确定位这些项目。

实施例： dl.dropboxusercontent.com/u/19864640/port/layout.html

2）包含所有这些项目的容器被转换。这样我可以将所有项目放在一个div中，设置它们的百分比宽度，在px中设置填充。现在它可能是响应性的。

我还决定将视角改为＆＃34;在前面＆＃34;使它更容易。

不幸的是，这次我有另一个问题。我现在无法配置缩放。由于转换后的容器，我不能只使用标准的定心方法。

我试图制作＆＃34;反向变换＆＃34;也是，但仍然无法将其置于屏幕而不是转换容器。

实施例： dl.dropboxusercontent.com/u/19864640/Portfolio/index.html

这里的jsfiddle： jsfiddle.net/c76qek4z/1 /

JS中的前两个块是插件：第一个用于保持item的比例，第二个用于更容易的转换：ricostacruz.com/jquery.transit /

3）它基于第二个想法，我想将点击的项目附加到正文，然后将其居中并缩放，但又一次......这次它没有任何变换动画。< / p>

我一直试图这样做大约20个小时，但仍然无法做到这一点...... 你有什么想法？如果问题不明确，请问 - 这对我来说非常重要。