变换：从上到下缩放图像答案

【问题标题】：Transform: scale an image from top to bottom变换：从上到下缩放图像
【发布时间】：2018-09-09 17:31:26
【问题描述】：

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

目前，thumbsskin 类中的图像从中心缩放，并扩展到顶部、底部和侧面。它希望将其固定在顶部，并且仅按比例缩小到侧面。仅使用 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;
}

【问题讨论】：

标签： image css scale css-transforms

【解决方案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>

【讨论】：