使用 Css 过渡和变换的缩放效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14479162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom effect using Css transition and transform?
提问by Sangam254
I have a button of size 50 x 50. On hover, I need to replace this button by a 70 x 70 size button. Also, The transition should be smooth.
我有一个 50 x 50 大小的按钮。悬停时，我需要用一个 70 x 70 大小的按钮替换这个按钮。此外，过渡应该是平滑的。
So, I am trying to use the CSS transition and transform function. That is, transform3d in z-axis.
所以，我正在尝试使用 CSS 转换和转换功能。也就是说，在 z 轴上进行 transform3d。
<style>
.button1{
position:absolute;
top:0px;
left:0px;
display:inline-block;
width:50px;
height:50px;
background:url(images/button.png) no-repeat;
background-position:bottom left;
/* Transition */
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.button1:hover{
width:70px;
height:70px;
background-position:top left;
-webkit-transform: translate3d(0, 0, 10px);
-moz-transform: translate3d(0, 0, 10px);
-ms-transform: translate3d(0, 0, 10px);
-o-transform: translate3d(0, 0, 10px);
}
</style>
</head>
<body>
<a href="#" class="button1"></a>
</body>
I have tried this code for x and y transforms and it works. But, it does not work for the z-axis.
我已经为 x 和 y 变换尝试了这段代码，它有效。但是，它不适用于 z 轴。
Basically, I want a smooth easing zoom effect on hover.
基本上，我想要在悬停时平滑的缓动缩放效果。
Please suggest.
请建议。
回答by amustill
You're over-complicating the problem by attempting to scale with dimensions and transforms at the same time.
通过尝试同时缩放维度和变换，您使问题过于复杂。
Simply applying a scaletransform will achieve what want, although large scales can produce blurs on images and text.
简单地应用scale变换就可以实现想要的效果，尽管大比例尺会在图像和文本上产生模糊。
.button:hover {
/* Un-prefixed. Prefix `transform` for all target browsers. */
transform: scale(1.2);
}
