-webkit-transform은 무엇입니까 : translate3d (0,0,0);

-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를 사용합니다.

Currently, browsers like Chrome, FireFox, Safari, IE9+ and the latest version of Opera all come with hardware acceleration, they only use it when they have an indication that a DOM element would benefit from it.

---

Be aware that it creates a stacking context (plus what the other answers said), so it does potentially have an effect on what you see, e.g. making something appear over an overlay when it isn't supposed to.

참고URL : https://stackoverflow.com/questions/18529381/what-does-webkit-transform-translate3d0-0-0-exactly-do-apply-to-body