使用 CSS 反转图像比例？答案

【问题标题】：Reverse img scale using CSS?使用 CSS 反转图像比例？
【发布时间】：2013-05-16 14:24:37
【问题描述】：

我正在尝试用 CSS 做一些我认为以前没有做过的事情。当鼠标悬停在 img 上时，我使用 CSS 使图像动画按比例放大（平滑地增长）。这是一个很好的效果，可以用来制作漂亮的作品集或很酷的菜单，比如苹果 OS X 扩展坞。但是，我最近看到一个网站将图像缩小，使其更小，然后显示文本，并认为这很棒。它使用 JavaScript 和 JQuery 的提示，但我想知道这是否可以单独在 CSS 中完成？下面是放大图片的代码：

a:hover, a:focus { 
    z-index:440 
}
a img {
    border:0;
    -webkit-transition:all .2s; 
    -moz-transition:all .2s;
}
ul.Port a img {
    -webkit-transform-origin: top;/
    -moz-transform-origin: top; 
}
a:hover img, a:focus img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}

如果我将值更改为负值，我会遇到 img 闪烁进出适当大小的问题，并且它不会平滑地缩放更小，但会被根除。我要求在 CSS 中做的事情是不可能的吗？还是我错过了什么？我已经玩了几个小时，但无法让它正常工作。

【问题讨论】：

为了缩小尺寸，您不要将比例设置为负数；您将 scale 设置为小于 1 的值。（例如，0.5 使其缩小一半）

标签： css html image animation scale

【解决方案1】：

解决方案：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            img {
                margin-top:50px;
                -webkit-transition:all .2s; 
                -moz-transition:all .2s;
            }
            img:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
            }
        </style>
    </head>
    <body>
        <img src="top.png" alt="" />
    </body>
</html>

【讨论】：

我知道我做错了什么，我将它设置为 1，但它没有改变大小，所以我去了 -1，它变得疯狂，我没有考虑小数，所以在阅读您的回复后，我将 1.5 更改为 .7 或 .6，效果很好。我只认为是可靠的数字。我不确定我到底在想什么，但感谢你把我的大脑打到了适当的位置。！！！！