这就是我想要缩放图像的方式，顺利地没有任何跳跃 http://themes.themegoods2.com/keres/gallery-4-columns/.
我的尝试不像上面的画廊那样有效，图像（在我的例子中是红色方块）跳跃，my code http://www.cssdesk.com/ThGXH:
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: all .2s ease-in-out;
}
div:hover {
-webkit-transform: scale(1.8);
}
<section>
<div></div>
</section>
如何解决这个问题？红色方块跳跃。是否可以像开头链接中的画廊一样使用 CSS Transition 平滑缩放？
你所说的“跳跃”是什么意思？尝试this http://jsfiddle.net/sergdenisov/omagwu6h/1/，也跳？
section {
background-color: rgba(0, 0, 0, 0.701961);
width: 400px;
height: 400px;
}
div {
position: absolute;
top: 120px;
left: 120px;
width: 160px;
height: 160px;
background-color: red;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
div:hover {
-webkit-transform: scale(1.8) rotate(0.01deg);
transform: scale(1.8) rotate(0.01deg);
}
<section>
<div></div>
</section>
另外，您可以尝试使用图像容器的变体（如问题的第一个链接中所示）。
JSFiddle http://jsfiddle.net/sergdenisov/o1ztj3o0/1
.banner {
position: relative;
z-index: 1;
cursor: pointer;
border: 1px solid #dfe2e5;
background: #000;
width: 310px;
height: 150px;
-webkit-transition: border-color 0.1s;
transition: border-color 0.1s;
overflow: hidden;
}
.banner:hover {
border-color: #bdc1c5;
}
.banner__image-container {
overflow: hidden;
height: 100%;
}
.banner__image {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.banner:hover .banner__image {
-webkit-transform: scale(1.15) rotate(0.01deg);
transform: scale(1.15) rotate(0.01deg);
opacity: 0.5;
}
<div class="banner">
<div class="banner__image-container">
<img class="banner__image" src="https://picsum.photos/310/150/?image=1022"/>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
