javascript - 鼠标悬停时如何向上移动框？

Question

我试图在简单地进行鼠标悬停时向上移动框。我可以将鼠标悬停在每个盒子上，但不能让它向上移动。这是我的代码:

body {
  text-align: center;
}
.row {
 padding: 50px 0;
}
.post-item {
 outline: 1px solid red;
 padding: 50px 20px;
 border: 5px solid transparent;
}
.post-item:hover {
 outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
 }

这是我的 LIVE DEMO

Answer 1

您给出的示例是通过两个 CSS 属性完成的:

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
  transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}