-webkit-transform은 무엇입니까 : translate3d (0,0,0); 정확히? 몸에 적용?

-webkit-transform: translate3d(0,0,0); 정확히 무엇을 합니까? 성능 문제가 있습니까? 본문이나 개별 요소에만 적용해야합니까? 스크롤 이벤트를 크게 개선하는 것 같습니다.

수업 감사합니다!

-webkit-transform: translate3d(0,0,0); 일부 장치는 하드웨어 가속을 실행합니다.

여기에 좋은 읽기가 있습니다.

기본 응용 프로그램은 장치의 그래픽 처리 장치 (GPU)에 액세스하여 픽셀을 날릴 수 있습니다. 반면에 웹 응용 프로그램은 브라우저 컨텍스트에서 실행되므로 소프트웨어가 렌더링의 대부분 (전부는 아니지만)을 수행 할 수 있으므로 전환 성능이 떨어집니다. 그러나 웹이 따라 잡고 있으며 대부분의 브라우저 공급 업체는 이제 특정 CSS 규칙을 통해 그래픽 하드웨어 가속을 제공합니다.

를 사용 -webkit-transform: translate3d(0,0,0);하면 CSS 전환을 위해 GPU가 작동하여 더 매끄럽게 (높은 FPS)됩니다.

참고 : translate3d(0,0,0) 보는 것과 관련하여 아무 작업도하지 않습니다. x, y 및 z 축에서 개체를 0px만큼 이동합니다. 하드웨어 가속을 강제하는 기술 일뿐입니다.

대안은 -webkit-transform: translateZ(0). 그리고 변형으로 인해 Chrome 및 Safari에서 깜박이는 경우 -webkit-backface-visibility: hidden및 -webkit-perspective: 1000. 자세한 내용은 이 문서를 참조 하십시오 .

나는 이것을 설명하는 대답을 여기에서 보지 못했습니다. div복잡한 유효성 검사 세트를 사용하여 각 및 해당 옵션을 계산하여 많은 변환을 수행 할 수 있습니다 . 그러나 3D 기능을 사용하는 경우 보유한 각 2D 요소는 3D 요소로 간주되며 이러한 요소에 대해 즉석에서 행렬 변환 을 수행 할 수 있습니다 . 그러나 대부분의 요소는 모두 GPU를 사용하기 때문에 이미 하드웨어 가속이 "기술적으로"입니다. 그러나 3D 변환은 이러한 각 2D 렌더링의 캐시 된 버전 (또는의 캐시 된 버전 div)에서 직접 작동하고 행렬 변환 (벡터화되고 병렬화 된 FP 수학)을 직접 사용합니다.

3D 변환은 캐시 된 2D div의 기능 만 변경한다는 점에 유의해야합니다 (즉, div는 이미 렌더링 된 이미지 임). 따라서 테두리 너비와 색상을 변경하는 것과 같은 것은 더 이상 "3D"로 모호하게 말하지 않습니다. 생각해 보면 테두리 너비를 변경하려면를 div다시 렌더링 하고 3D 변환을 적용 할 수 있도록 다시 캐시해야합니다.

이것이 의미가 있기를 바라며 더 궁금한 점이 있으면 알려주세요.

의문에 답하기 위해 는 GPU 셰이더에 translate3d: 0x 0y 0z의 정점을 실행하여 형성된 텍스처에서 변환이 직접 작동하므로 아무것도하지 않습니다 div. 이 셰이더 리소스는 이제 캐시되고 프레임 버퍼에 그릴 때 매트릭스가 적용됩니다. 그래서 기본적으로 그렇게해서 얻는 이점은 없습니다.

이것이 브라우저가 내부적으로 작동하는 방식입니다.

1 단계 : 입력 구문 분석

<div style = "position:absolute;left:0;right:0;bottom:0;top:0;"></div>

2 단계 : 복합 레이어 개발

CompositeLayer compLayer = new CompositeLayer();
compLayer.setPosition(0, 0, 0, 0);
compLayer.setPositioning(ABSOLUTE); // Note. this is psuedocode. The actual code
Pipeline.add(compLayer, zIndex); // would be significantly more complex.

3 단계 : 합성 레이어 렌더링

for (CompositeLayer compLayer : allCompositeLayers){

     // Create and set cacheTexture as active target
     Texture2D cacheTexture = new Texture2D();
     cacheTexture.setActive();

     // Draw to cachedTexture
     Pipeline.renderVertices(compLayer.getVertices());
     Pipeline.setTexture(compLayer.getBackground());
     Pipeline.drawIndexed(compLayer.getVertexCount());

     // Set the framebuffer as active target
     frameBuffer.setActive();

     // Render to framebuffer from texture and **applying transformMatrix**
     Pipeline.renderFromCache(cacheTexture, transformMatrix);
}

MobileSafary (iOS 5)의 스크롤링에 버그가있어 스크롤링 컨테이너에서 입력 요소의 복사본으로 아티팩트가 나타납니다.

각 자식 요소에 translate3d 를 사용하면 이상한 버그를 수정할 수 있습니다. 나를 위해 하루를 절약 한 CSS의 예가 있습니다.

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}

Translate3D는 하드웨어 가속을 강제 합니다 .CSS 애니메이션, 변환 및 전환은 자동으로 GPU 가속 되지 않고 대신 브라우저의 느린 소프트웨어 렌더링 엔진에서 실행됩니다. GPU를 사용하기 위해 우리는 translate3d를 사용합니다.

현재 Chrome, FireFox, Safari, IE9 + 및 Opera의 최신 버전과 같은 브라우저는 모두 하드웨어 가속 기능을 제공하며 DOM 요소가 혜택을받을 것이라는 표시가있을 때만 사용합니다.

그것이 생성하는주의 스택 문맥 은, 그래서 (플러스 어떤 다른 답변이 말했다) 않습니다 이로되어 있지 않은 경우 잠재적으로 당신이 무엇을보고에 영향을, 예를 들면 만드는 일이 오버레이를 통해 나타납니다.