这就是我要缩放图像的方式,smoothly without any jumps。
我的尝试无法像上面的画廊那样工作,图像(在我的情况下为红色正方形)跳了起来,my code:
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,也跳吗?
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>
此外,您也可以尝试使用带有图像容器的变体(例如在问题的第一个链接中。)>
.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="http://www.thedisciplesofdesign.co.uk/wp-content/uploads/2014/10/featured-image1-310x150.jpg"/> </div> </div>
我有时通过在transform属性上添加rotate(0.01deg)
来解决过渡时的奇怪跳转,如下所示: