-
窗户的瓷砖设计对我来说是美妙的。我从来不知道这个优雅的盒子布局能给我留下深刻的印象，所以我试着用CSS和jQuery来实现这个网络中的瓷砖设计，我尝试了瓷砖翻转动画效果，它可以在瓷砖的前端和背面显示出两种不同的信息。
演示下载
首先，我们要创建与下面的图片相同的HTML内容，每一个平铺前后分别包含两个div，它们都包含要显示的信息，下面的HTML代码生成所需的平铺布局。
瓦片设计包含CSS类的名称。
CSS代码将内容复制到剪贴板。
Internet Explorer
一
瓦1
二
瓦2
三
瓦3
四
瓦4
使用CSS和jQuery的Windows Phone瓷砖
这是一块宽瓷砖。
CSS关注的是平铺的大小和对齐方式（请下载源代码查看）。在这里，我想强调CSS的重要部分，它在平铺时创建透明的分区视图。
CSS代码将内容复制到剪贴板。
{。瓦
浮点数：左；
字体家庭：'roboto，sans serif；
字体大小：20px；
左：2px保证金；
边距：2px；
500px -moz视角；
WebKit的视角：500px；
- o-perspective：500px；
MS的视角：500px；
观点：500px；
}
下面的jQuery代码与平铺翻转有关，这里我使用了动画的传输，这是jQuery的扩展，它确实有利于平滑的动画，并且提供了很多在我们的情况下非常需要的易于使用的技术。这种易于使用的技术可以使瓷砖翻转看起来像两个动画。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
$（文档）Ready（函数（）{）
$（）。隐藏（）；
$（。瓦）。Mouseenter（function（）{）
$（这个）。孩子们。
rotatex 90deg
}，500，easeincirc
VaR模型后；
美元（这个）；
返回$（这个）；
Back.css（{
rotatex 90deg
}）；
Back.show（）；
back.transit（{
rotatex 0deg
}，500，easeoutcirc ）；
}）；
}）；
$（。瓦）。Mouseleave（function（）{）
$（这个）。
rotatex 90deg
}，500，easeincirc
VaR的前面；
美元（这个）；
前面= $（这个）。兄弟姐妹（）；
front.css（{
rotatex 90deg
}）；
front.show（）；
front.transit（{
rotatex 0deg
}，500，easeoutcirc ）；
}）；
}）；
}）；
一开始，所有的块都是隐藏的，rotatex是90度，前面一部分是可见的，并rotatex 0。所有块翻过来当鼠标指针进入回来当鼠标指针出来。
上面的图表解释了当鼠标指针进入时调用过程的过程，鼠标指针的工作原理与它出现时的工作原理类似。
本设计采用在浏览器的最新版本是可用的CSS视觉特性。我测试了它，我发现它在Firefox 20和chrome26.0.the最好的运行就是你有硬件的图像绘制在Chrome中。如果您的浏览器不支持远程性能，它似乎在正交视图是有效的。