如何创建像谷歌现在卡片一样的卡片悬停样式效果[关闭]答案

【问题标题】：How to create card hover style effect like google now cards [closed]如何创建像谷歌现在卡片一样的卡片悬停样式效果[关闭]
【发布时间】：2015-01-11 10:50:21
【问题描述】：

如何创建卡片悬停样式和可能的卡片加载样式，如谷歌现在（在桌面浏览器中打开）卡片。喜欢这个网址

http://www.google.com/landing/now/#howtogetit

【问题讨论】：

显示你的代码而不是 URL。
我无法像该 URL 中的那些卡片那样产生确切的效果。但是我想出了这个。你能建议修改什么让它像谷歌现在卡一样工作吗？ jsfiddle.net/AnirbanBera/85ytzq3k/1
好吧，perspective 继续前进。
感谢您的建议。只是想知道他们是否为该 UI 使用了透视图？
这将非常有帮助。我也在浏览您提供的示例。

标签： jquery html css user-interface user-experience

【解决方案1】：

试试这个

.panel
{
    min-height:50px;
	border:1px solid;
	width:200px;
	display:inline-block;
	margin-left:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.hover-effect:hover
{
    -webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
    background-color:grey;
}
.col-xs-4{
	display:inline;
}

<div class="row">
    <div class="col-xs-4">
        <div class="panel panel-default hover-effect">
        card 1
        </div>
    </div>
    
    <div class="col-xs-4">
        <div class="panel panel-default hover-effect">
        card 2
        </div>
    </div>
    
    <div class="col-xs-4">
        <div class="panel panel-default hover-effect">
        card 3
        </div>
    </div>
</div



</body>

【讨论】：

您好 Vrajesh，感谢您的建议。但正如您所见，卡片悬停行为（在 google now 卡片链接中）与您发布的行为有很大不同。我只是在搜索。再次感谢您的建议。

【解决方案2】：

您可以这样使用perspective：

body {
  background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png);
}
.container {
  position: relative;
  margin: 0 auto;
  top: 10px;
  width: 100%;
  height: 350px;
  -webkit-perspective: 600px;
  perspective: 600px;
  text-align: center;
}
.item {
  display: inline-block;
  position: relative;
  margin: 15px;
  width: 225px;
  height: 300px;
  line-height: 300px;
  background-color: #51634b;
  border-radius: 2px;
  -webkit-animation: animOpp 0.4s 1;
  animation: animOpp 0.4s 1;
  box-shadow: 1px 1px 5px #304129;
}
.item:hover {
  -webkit-animation: anim ease-out 0.5s 1;
  animation: anim 0.5s 1;
  transform: translateZ(30px);
  cursor: pointer;
}
.item:active {
  -webkit-transform: translateZ(26px);
  transform: translateZ(26px);
}
@-webkit-keyframes anim {
  0% {
    transform: rotateX(0deg) translateZ(0px);
  }
  25% {
    transform: rotateX(-4deg) translateZ(15px);
  }
  37% {
    transform: rotateX(-8deg) translateZ(30px);
    transform-origin: 50% 0%;
  }
  72% {
    transform-origin: 50% 0%;
    transform: rotateX(-4deg) translateZ(30px);
  }
  100% {
    transform-origin: 50% 0%;
    transform: rotateX(0deg) translateZ(30px);
  }
}
@keyframes anim {
  0% {
    transform: rotateX(0deg) translateZ(0px);
  }
  25% {
    transform: rotateX(-4deg) translateZ(15px);
  }
  37% {
    transform: rotateX(-8deg) translateZ(30px);
    transform-origin: 50% 0%;
  }
  72% {
    transform-origin: 50% 0%;
    transform: rotateX(-4deg) translateZ(30px);
  }
  100% {
    transform-origin: 50% 0%;
    transform: rotateX(0deg) translateZ(30px);
  }
}
@-webkit-keyframes animOpp {
  0% {
    transform: translateZ(30px);
  }
  35% {
    transform: translateZ(20px);
  }
  100% {
    transform: translateZ(0px);
  }
}
@keyframes animOpp {
  0% {
    transform: translateZ(30px);
  }
  35% {
    transform: translateZ(20px);
  }
  100% {
    transform: translateZ(0px);
  }
}

<body>
  <div class="container">
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
    <div class="item">Content Goes Here</div>
  </div>
</body>

【讨论】：

哇！哇！！这就是我要找的。非常感谢。我不能投票，因为我没有所需的声誉（15 代表）。但是将其标记为答案。