css3 transition transform属性造成文字抖动

现象:信息栏第一行文字,最后总会抖动

css3 transition transform属性造成文字抖动_第1张图片

代码:

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

你可能感兴趣的:(前端开发)