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>

变换：从上到下缩放图像

1 个答案: