使用CSS在圖像上平移效果

Question

我想要使​​用CSS在圖像上平移效果。 我有變焦效果，但是那不是我想要的。 我希望圖像具有相同的高度，但要具有平移效果。

 .col_2 { width: 46%; margin-left: 2%; margin-right: 2%; margin-bottom: 50px; float: left; display: block; } .box { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); border: 1px solid #eeeeee; position: relative; display: flex; flex-direction: column; background: #fff; } .box:hover { box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.25); } .box .image { overflow: hidden; } .box .image img { width: 100%; max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .image:hover img { overflow: hidden; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } 

 <div class="col_2 box"> <a href="#" class="image"> <img src="http://ll-c.ooyala.com/e1/RoMXVvYjE6bIIVlTLF6Eel1wmw9xj9j_/promo322520974"></a> </div> 

Answer 1

只是改變：

transform: scale(1.1);

要：//注意，您可以傳遞x，y進行翻譯，也可以只使用// translateX（）或translateY（）轉換：translate（someAmount）;

以獲得平移效果。 但是，為了能夠在某個方向上平移（動態）平移量，您將需要獲取鼠標在元素上的位置，並據此做出一些決策。

而且，過渡和轉換在所有現代瀏覽器中都得到了很好的支持，並且已經使用了幾年。 您可以刪除所有供應商前綴。

 .col_2 { width: 46%; margin-left: 2%; margin-right: 2%; margin-bottom: 50px; float: left; display: block; } .box { transition: all 0.3s ease-out; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1); border: 1px solid #eeeeee; position: relative; display: flex; flex-direction: column; background: #fff; } .box:hover { box-shadow: 0px 2px 25px 0px rgba(0, 0, 0, 0.25); } .box .image { overflow: hidden; } .box .image img { width: 100%; max-width: 100%; transition: all 0.3s; } .image:hover img { overflow: hidden; transform: translateY(-25%); /* translate is for move (pan), not scale */ } 

 <div class="col_2 box"> <a href="#" class="image"> <img src="http://ll-c.ooyala.com/e1/RoMXVvYjE6bIIVlTLF6Eel1wmw9xj9j_/promo322520974"></a> </div>