0

私は次の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ても、ホバリングするとわずかに下に移動します。何が原因で、どうすれば防ぐことができますか?

4

1 に答える 1

2

見てみましょう: 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);
}
于 2012-09-18T02:46:15.240 に答える