如何使用 CSS3 实现类似 Windows Phone 的“平铺”3D 转换答案

【问题标题】：How to achieve a Windows Phone-like "tiled" 3D transformation using CSS3如何使用 CSS3 实现类似 Windows Phone 的“平铺”3D 转换
【发布时间】：2012-11-20 01:55:38
【问题描述】：

我正在尝试使用 3D 转换/过渡的 CSS3 动画效果。我有一个 HTML 容器，它被有效地划分为“图块”，另一层位于顶部。我想做的是在单个图块上创建“翻转”效果。

与this 类似，但其中一层是纯 HTML（例如文本）除外。

.sub {
    -webkit-transition: -webkit-transform 0.6s linear;
}
.flip {
    -webkit-transform: rotate3d(1,0,0,90deg);
}

在考虑了一段时间后，我不确定这是否可能。这是我尝试过的。

带有一些文本作为底层的容器。
顶部的图层瓷砖；将一个图块的不透明度设置为零，创建一个“窗口”。
现在将转换应用到底层。
在顶部添加第三层，与第一层相同。

这几乎可行，但不是真的； “窗口”应该会翻转，但当然顶层仍然可以在窗口上方看到，ruining the effect。

有没有办法实现这种部分翻转的效果？

【问题讨论】：

标签： css microsoft-metro css-transitions css-transforms

【解决方案1】：

我不确定，但我认为这 -> http://ryanlowdermilk.com/2012/03/windows-8-metro-tiles-with-html-css3-and-javascript/ 是你需要的......

【讨论】：

这真的很漂亮，但不是我想要的。老实说，无论如何，我的问题可能应该因为过于本地化而被关闭。