css3 transition transform屬性造成文字抖動
阿新 • • 發佈:2019-02-17
現象:資訊欄第一行文字,最後總會抖動
程式碼:
.match .match-item{
width: 200px;
height: 300px;
display: inline-block;
margin: 0 10px 0;
box-shadow: 0 1px 6px 2px rgba(1,1,1,0.6);
border-radius: 2px;
border: 2px solid rgba(1,1,1,0.6);
transition: all 0.5s;
position: relative;
cursor : pointer;
}
.match .match-item:hover{
transform: scale(1.05);
box-shadow: 0 1px 8px 4px rgba(1,1,1,0.8);
border: 2px solid #68d0ff;
}
解決辦法 : translateZ(0)
transform: scale(1.05) translateZ(0);