Jquery 如何创建像google now卡一样的卡悬停样式效果

如何创建像google now（在桌面浏览器中打开）卡一样的卡悬停样式和可能的卡加载样式。喜欢这个网址吗

试试这个

.panel
{
最小高度：50px；
边框：1px实心；
宽度：200px；
显示：内联块；
左边距：10px；
-webkit转换：1s轻松输入输出；
-moz转换：1s易入易出；
-o型转换：1s易进易出；
转换：1s易入易出；
}
.悬停效果：悬停
{
-webkit转换：规模（1.3）；
-moz变换：比例（1.3）；
-o变换：比例（1.3）；
-ms变换：比例（1.3）；
转换：比例（1.3）；
背景颜色：灰色；
}
.col-xs-4{
显示：内联；
}

卡1
卡2
卡片3
您可以使用透视图来执行此操作，方法如下：


正文{
背景：url(http://s25.postimg.org/b6q25p4p7/black_thread.png);
}
.集装箱{
位置：相对位置；
保证金：0自动；
顶部：10px；
宽度：100%；
高度：350px；
-webkit透视图：600px；
透视图：600px；
文本对齐：居中；
}
.项目{
显示：内联块；
位置：相对位置；
利润率：15px；
宽度：225px；
高度：300px；
线高：300px；
背景色：#51634b；
边界半径：2px；
-webkit动画：animOpp 0.4s1；
动画：animOpp 0.4s 1；
盒影：1px 1px 5px#304129；
}
.项目：悬停{
-webkit动画：动画放松0.5s 1；
动画：动画0.5s1；
变换：translateZ（30px）；
光标：指针；
}
.项目：活动{
-webkit转换：translateZ（26px）；
转化：translateZ（26px）；
}
@-webkit关键帧动画{
0% {
变换：旋转（0deg）平移（0px）；
}
25% {
变换：rotateX（-4deg）translateZ（15px）；
}
37% {
变换：rotateX（-8度）translateZ（30像素）；
变换原点：50%0%；
}
72% {
变换原点：50%0%；
变换：rotateX（-4deg）translateZ（30px）；
}
100% {
变换原点：50%0%；
变换：旋转（0度）平移（30像素）；
}
}
@关键帧动画{
0% {
变换：旋转（0deg）平移（0px）；
}
25% {
变换：rotateX（-4deg）translateZ（15px）；
}
37% {
变换：rotateX（-8度）translateZ（30像素）；
变换原点：50%0%；
}
72% {
变换原点：50%0%；
变换：rotateX（-4deg）translateZ（30px）；
}
100% {
变换原点：50%0%；
变换：旋转（0度）平移（30像素）；
}
}
@-webkit关键帧animOpp{
0% {
变换：translateZ（30px）；
}
35% {
变换：translateZ（20px）；
}
100% {
变换：translateZ（0px）；
}
}
@关键帧animOpp{
0% {
变换：translateZ（30px）；
}
35% {
变换：translateZ（20px）；
}
100% {
变换：translateZ（0px）；
}
}

内容在这里
内容在这里
内容在这里
内容在这里
内容在这里
内容在这里
内容在这里
内容在这里
显示您的代码而不是URL。我无法产生与该URL中的卡一样的确切效果。但是我想到了这个。你能建议修改什么使它像google now卡一样工作吗。好的，还有路要走。谢谢你的建议。只是想知道他们是否在UI中使用透视图？这将非常有用。我也在看你提供的例子。嗨，Vrajesh，谢谢你的建议。但是正如你所看到的，卡片的悬停行为（在google now cards链接中）与你发布的明显不同。我只是像那样搜索。再次感谢你的建议。哇！哇！这就是我要找的。谢谢。我不能投赞成票，因为我没有必要的声誉（15个代表）。然而，我把它标记为答案。