Css轉換不能與網格一起工作

我只是將效果應用於圖像，但縮放不起作用。

至於鉻瀏覽器欄上的圖片是白色的。

我的代碼

<ul> 
<li> 
<div class="mask"> 
    <img src="http://2.bp.blogspot.com/-HRWsU2uJbgw/UOllw5oCL5I/AAAAAAAAB9c/NbG0Q3Tb8PI/s1600/love_colorful-1920x1080.jpg"> 
    <span>Lorem ipsum dolor sit amet</span> 
    </div> 
</li> 
<li> 
<div class="mask"> 
    <img src="http://media-cache-ec0.pinimg.com/736x/c3/10/22/c3102281f88237e7a2515099d2e6651f.jpg"> 
    <span>Lorem ipsum dolor sit amet</span> 
    </div> 
</li> 
<li> 
<div class="mask"> 
    <img src="http://media-cache-ec0.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg"> 
    <span>Lorem ipsum dolor sit amet</span> 
    </div> 
</li> 
<li> 
<div class="mask"> 
    <img src="http://media-cache-ak0.pinimg.com/736x/2e/7f/db/2e7fdb7ed765973407fed0b0141bb126.jpg"> 
    <span>Lorem ipsum dolor sit amet</span> 
    </div> 
</li> 
<li> 
<div class="mask"> 
    <img src="http://media-cache-ec0.pinimg.com/736x/0f/d0/84/0fd0847f7b48e5f16d896f62baa31b97.jpg"> 
    <span>Lorem ipsum dolor sit amet</span> 
    </div> 
</li> 
<li> 
<div class="mask"> 
    <img src="http://media-cache-ec0.pinimg.com/600x/97/35/91/97359142dce582b4530cb0f23fbe2e43.jpg"> 
    <span>Lorem ipsum dolor sit amet</span> 
    </div> 
</li> 
</ul> 

ul{-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;list-style:none;} 
ul li{display:inline-block;background:#fff;margin-bottom:10px;} 
ul li:hover img{-webkit-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);-webkit-transition:all 0.6s ease 0s;-moz-transition:all 0.6s ease 0s;-o-transition:all 0.6s ease 0s;-ms-transition:all 0.6s ease 0s;transition:all 0.6s ease 0s;} 
ul li img{width:100%;} 
ul li .mask{overflow:hidden;}

來源

2016-03-02 Kuzey Demirel

我承認，我不知道爲什麼這工作，但似乎Chrome提供了一個bug與CSS列打交道......但基於在此ANSWER添加一個Z翻譯AND -webkit-margin-top-collapse:discard;圖像可能會提供一些救濟。

ul li:hover img { 
    transform: scale(1.4) translateZ(0); 
    transition: transform 0.6s ease 0s; 
    -webkit-margin-top-collapse:discard; 
}

JSfiddle Demo

來源

2016-03-02 16:05:43

Css轉換不能與網格一起工作

回答

相關問題