[css] CSS 전환 효과로 인해 이미지가 흐려 지거나 이미지가 1px 이동합니까?

2020 업데이트

• 흐릿한 이미지에 문제가있는 경우 아래 image-renderingCSS 속성 , 특히 CSS 속성 을 확인하십시오 .
• 모범 사례 접근성과 SEO를 현명하게 <img>사용하려면 객체 맞춤 CSS 속성을 사용하여 배경 이미지를 태그로 바꿀 수 있습니다.

원래 답변

CSS 에서 이것을 시도하십시오 :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

이것이하는 일은 부서가 “더 많은 2D”로 동작하게 만드는 것입니다.

• 뒷면이 기본으로 그려져 회전 등으로 물건을 뒤집을 수 있습니다. 시계 방향으로 왼쪽, 오른쪽, 위, 아래로, 크기 조절 또는 회전 (반대) 만 움직일 필요는 없습니다.
• 항상 0 값을 갖도록 Z 축을 변환합니다.
• 이제 핸들 크롬 backface-visibility과 transform포함하지 않는 -webkit-접두사. 현재 이것이 다른 브라우저 렌더링 (FF, IE)에 어떤 영향을 미치는지 알 수 없으므로 접두사가 아닌 버전을주의해서 사용하십시오.

답변

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

<div class="translate">
     <iframe/>
</div>

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

transition-timing-function: steps(10, end);

transform: scale(2);
zoom: 0.5;