我在开发一个网站的缩放效果时遇到了这个问题。
当你为CSS伪状态设置过渡持续时间后,设置缩放属性会使元素在悬停时缩放,但一旦它达到最大尺寸,它就会缩小到一个较小的尺寸(但这个尺寸仍然比原来的大)。
然而,当使用相同的过渡和x-transform: scale()
属性时,项目可以平滑地缩放(并且保持其中心坐标,我想补充说明一下)。
你可以在this fiddle中看到这一点。红色框向右下角增长,但然后跳回一个较小的大小,而蓝色框则平滑增长并保持完整大小。
为什么会这样呢?
*
{
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
box:hover
{
zoom: 1.1;
}
box2:hover
{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}