使用CSS反转img比例？
我正在尝试用CSS做一些我认为以前没有做过的事情。当鼠标悬停在img上时，我使用CSS使图像的动画比例变大（平滑增长）。这是一个很好的效果，可以用来制作很好的公文包或很酷的菜单，比如apple OS X dock。然而，我最近看到一个网站缩小了图像，使其变小，然后显示文本，我认为这很好。它使用JavaScript和JQuery的提示，但我想知道这是否可以在CSS中单独完成？下面是放大图像的代码：使用CSS反转img比例？,css,html,image,animation,scale,Css,Html,Image,Animation,Scale,我正在尝试用CSS做一些我认为以前没有做过的事情。当鼠标悬停在img上时，我使用CSS使图像的动画比例变大（平滑增长）。这是一个很好的效果，可以用来制作很好的公文包或很酷的菜单，比如apple OS X dock。然而，我最近看到一个网站缩小了图像，使其变小，然后显示文本，我认为这很好。它使用JavaScript和JQuery的提示，但我想知道这是否可以在CSS中单独完成？下面是放大图像的代码： a:hover, a:focus { z-index:440 } a img {
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中是不可能的吗？还是我遗漏了什么？我已经玩了几个小时了，但不能让它正常工作 解决方案：
<!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>
img{
边缘顶部：50px；
-webkit转换：all.2s；
-moz跃迁：all.2s；
}
img：悬停{
-webkit转换：比例（1.5）；
-moz变换：比例（1.5）；
}