变换:从上到下缩放图像

问题描述 投票:5回答:1

是否可以使用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;
}
css image css3 scale css-transforms
1个回答
6
投票

默认情况下,元素将以其中心点为原点进行转换。所以在这种情况下,它将从中心开始缩放。您可以像设置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>
© www.soinside.com 2019 - 2024. All rights reserved.