html - 知道是什么原因导致悬停时图像顶部的轻微移动吗？

我有以下HTML：

<figure>
  <img src="http://lorempixel.com/200/200/" alt="">
  <figcaption>This is the caption</figcaption>
</figure>

以及以下CSS：

figure {
  background: #ddd;
  display: inline-block;
  height: 200px;
  margin: 50px;
  position: relative;
  width: 200px;
  vertical-align: top;
}
figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: 50% 0;
}
img {
  position: relative;
  transition: .2s;
  vertical-align: top;
  z-index: 10;
}
figcaption {
  bottom: 0;
  box-sizing: border-box;
  padding: 6px;
  position: absolute;
  text-align: center;
  width: 100%;
}

这是一个实时示例：http://codepen.io/joshnh/pen/FlvJr

尽管将transform-origin设置在图像的顶部，但将其悬停时仍会稍微向下移动。是什么原因引起的，如何预防呢？

最佳答案

看一下：http://jsfiddle.net/cQphE/

问题是您正在转换transform属性和transform-origin。悬停时它将从默认的50% 50%变为您设置的50% 0;。

你有这个：

img {
  transition: 0.2s;
}

figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: 50% 0;
}

与此相同：

img {
  box-shadow: none;
  transform: perspective(0) rotateX(0);
  transform-origin: 50% 50%;
  transition: 0.2s;
}

figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
  transform-origin: 50% 0;
}

您应该拥有的是：

img {
  transform-origin: 50% 0;
  transition: 0.2s;
}

figure:hover img {
  box-shadow: 0 30px 20px -10px hsla(0,0%,0%,.25);
  transform: perspective(1000px) rotateX(45deg);
}

关于html - 知道是什么原因导致悬停时图像顶部的轻微移动吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12469533/