变换:从上到下缩放图像

Question

是否可以使用css变换从上到下缩放图像？我在这里有这个例子:http://jsfiddle.net/865vgz82/13/

目前,类拇指皮中的图像从中心开始缩放,并扩展到顶部,底部和侧面.它希望将它固定在顶部,并且只能向下缩小到两侧.只有css才有可能吗？

.thumbsskin img {
  height: 135px;
  width: 320px;
  top: 0;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.thumbsskin:hover img {
  opacity: 0;
  -webkit-transform: scale(1.9);
  transform: scale(1.9);
  transform-origin: top;
}

Answer 1

默认情况下,元素将以其中心点为原点进行转换.所以在这种情况下,它将从中心开始缩放.您可以transform-origin像设置一样通过设置来更改此设置.

简单的例子:

div {
    margin: 3em auto;
    width: 50px;
    height: 50px;
    background: red;
}

div:hover {
    transform: scale(1.9);
}

.d2 {
    transform-origin:  top;
}

<div></div>
<hr />
<div class="d2"></div>