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

Question

我有以下 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为图像的顶部，但它在悬停时仍会略微向下移动。是什么原因造成的，我该如何预防？

Answer 1

看看：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);
}