CSS3变换比例显示抖动

标签 css transform scale

我有以下问题: 当我使用变换比例进行悬停时,图像显示抖动。

这是我的代码:

<div class="item">
</div>

.item {
    background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat 0 0 / 176px 176px; 
    width: 176px;
    height: 176px;
    display: inline-block;
    font-family: Arial;
    margin: 0px 10px 10px 0px;
    border: 5px solid #fff;
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.4);
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.4); 
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.item:hover {
    transform: scale(1.05);
    border: 5px solid #fff;
    cursor: default;
}

全屏 View :http://jsfiddle.net/excsa15w/embedded/result/

代码:http://jsfiddle.net/excsa15w/

是否有可能取消评审?

提前致谢

最佳答案

改变属性

background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat 0 0 / 176px 176px; 

background: transparent url("http://s14.directupload.net/images/141019/s3r8avxj.jpg") no-repeat; 

jsfiddle

关于CSS3变换比例显示抖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26449838/

相关文章:

html - 使用 HTML 和 CSS 在元素具有焦点时设置部分事件

html - CSS右侧边栏在浏览器调整大小时与页面内容重叠

wpf - 将 3D 矩形映射到 2D 屏幕

android - 如何使用 ConstraintLayout 在 Android 中针对不同的屏幕尺寸缩放 UI 元素

forms - 表单大小调整时标签字体大小也随之调整

c++ - 从转码示例中使用时缩放过滤器崩溃并出现错误

html - div 行为上的颜色叠加

javascript - 如何控制条之间的空间/边距?

css - 用于获得梯形的矩阵 3d 变换?

transform - 让 slerp 像 LookAt(x,Vector3.Right) 一样工作