使用CSS轉換縮放圖像

Question

這就是我想如何縮放我的圖像，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順利地進行縮放，就像開始時鏈接中的圖庫一樣？

Answer 1

「跳」是什麼意思？嘗試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>

另外，你可以嘗試用容器變形的圖像（如在你的問題的第一個鏈接）。

JSFiddle

.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>