CSS를 사용하여 데스크톱 및 모바일에서 하드웨어 가속 예제 코드 활성화

CSS를 사용하면 브라우저에서 하드웨어 가속을 활성화하여 GPU(그래픽 처리 장치)가 작동하여 성능을 향상시킬 수 있다는 사실을 알고 계셨습니까?

현재 대부분의 컴퓨터 그래픽 카드는 하드웨어 가속을 지원합니다. 이를 고려하여 GPU의 성능을 사용하여 웹 사이트나 응용 프로그램이 보다 원활하게 작동하도록 할 수 있습니다.

데스크톱 및 모바일에서 CSS를 사용하여 하드웨어 가속 활성화

CSS 애니메이션, 변환 및 전환은 GPU 가속을 자동으로 활성화하지 않지만 브라우저의 느린 소프트웨어 렌더링 엔진에 의해 수행됩니다. 그렇다면 GPU 모드로 어떻게 전환할 수 있습니까? 많은 브라우저가 특정 트리거 CSS 규칙을 제공합니다.

이제 Chrome, FireFox, Safari, IE9+ 및 최신 버전의 Opera는 모두 하드웨어 가속을 지원합니다. 이는 특정 CSS 규칙이 페이지의 DOM 요소에 적용되는 것을 감지하면 활성화됩니다. 특징 요소의 3D 변환.

예:

.cube
 {
   -webkit-transform:
 translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5,0.5,0.5);
}

그런데 요소에 3D 변형 효과를 적용할 필요가 없는 경우가 있는데 어떻게 해야 할까요? 이때 하드웨어 가속을 활성화하기 위해 브라우저를 "속이는" 약간의 트릭을 사용할 수 있습니다.

요소에 3D 변형을 적용하고 싶지 않더라도 3D 엔진을 켤 수 있습니다. 예를 들어, 하드웨어 가속을 활성화하려면 변환: 변환Z(0)을 사용할 수 있습니다.

.cube
 {
   -webkit-transform:
 translateZ(0);
   -moz-transform:
 translateZ(0);
   -ms-transform:
 translateZ(0);
   -o-transform:
 translateZ(0);
   transform:
 translateZ(0);
   /*
 Other transform properties here */

}

Chrome 및 Safari에서 CSS 변환이나 애니메이션을 사용할 때 페이지가 깜박일 수 있습니다. 다음 코드는 이 상황을 해결할 수 있습니다.

.cube
 {
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   backface-visibility:hidden;
 
   -webkit-perspective:1000;
   -moz-perspective:1000;
   -ms-perspective:1000;
   perspective:1000;
   /*
 Other transform properties here */
}

브라우저에서 webkit core, 또 다른 효과적인 방법은

.cube
 {
   -webkit-transform:
 translate3d(0,0,0);
   -moz-transform:
 translate3d(0,0,0);
   -ms-transform:
 translate3d(0,0,0);
   transform:
 translate3d(0,0,0);
  /*
 Other transform properties here */
}

입니다. CSS를 배워야 하는 학생들은 PHP 중국어 웹사이트 CSS 비디오 튜토리얼을 주목하세요. 무료로 볼 수 있는 CSS 비디오 튜토리얼이 많이 있습니다!  

위 내용은 CSS를 사용하여 데스크톱 및 모바일에서 하드웨어 가속 예제 코드 활성화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!