如何创建卡片悬停样式以及可能的卡片加载样式，例如 google now(在桌面浏览器中打开)卡片。喜欢这个网址
最佳答案
您可以通过以下方式使用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>关于jquery - 如何创建像 google now 卡片一样的卡片悬停样式效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26923336/