고급 CSS3 2D 및 3D 변환 기술

CSS3 Transform : 2D 및 3D 애니메이션의 힘을 발휘하십시오 플래시와 gifs를 잊어 버리십시오! CSS3 변환은 애니메이션 그래픽을 만들 수있는 우수한 방법을 제공하므로 더 빠르고 SEO 친화적 인 웹 사이트가 더 빠릅니다. Chrome, Firefox 및 Opera와 같은 최신 브라우저는 CSS3의 2D 및 3D 변환 기능을 완전히 지원합니다. 이 기사는 다음을 다룹니다

CSS3 2D 변환 기술

CSS3 3D 변환 기술

관점 이해

다양한 변환 함수

1. 우리는 또한 데모를 보여줄 것입니다
3D 카드 플립 a 3d 회전 큐브
왜 CSS3가 변형 되는가?
3. 답은 간단합니다 : 속도와 SEO. CSS 애니메이션은 GIF 또는 플래시보다 훨씬 가볍기 때문에 웹 사이트 성능을 향상시킵니다. 또한 검색 엔진은 CSS 애니메이션을 선호하여 검색 순위를 높일 수 있습니다. 주요 장점 :
4. 가볍고 효율적인 애니메이션, 웹 사이트 속도 및 SEO 2D 변환을 사용한 요소 위치 및 동작에 대한 정확한 제어 (번역, 회전, 스케일, 왜곡, 매트릭스). 3D 변환 (translate3d, scale3d, rotate3d)과 함께 시각적으로 매력적인 인터페이스 생성. 속성을 ​​통한 현실적인 깊이 인식 카드 플립 및 회전 큐브와 같은 고급 효과의 구현. CSS3 2D 변환 : 기본을 마스터 링
   CSS3 2D 변환은 애니메이션 및 스타일링 HTML 요소를 광범위하게 제어합니다. 주요 기능에는 다음이 포함됩니다
   1. : x 및 y 축을 따라 요소를 움직입니다. 예를 들어 :
   는 요소 20 픽셀을 오른쪽으로 이동하고 20 픽셀을 아래로 이동합니다. (참고 : 긍정적 인 x가 오른쪽으로 이동하고, 양수 y가 아래로 이동합니다.)
   2. 브라우저 호환성은 공급 업체 접두사 (-webkit-, -moz-, -o-).

   : z 축 주위에서 요소를 시계 방향으로 회전시킵니다. 예 : 는 30도 회전합니다

   : x 및 y 축을 따라 요소를 비 웁니다. 예 : 는 너비를 두 배로 늘리고 높이를 4 배로 늘립니다
   : x 및 y 축을 따라 요소를 왜곡시킵니다. 예 : x를 따라 30도, Y를 따라 20도
   : 모든 2D 변환을 단일 행렬로 결합합니다
   • matrix()
   CSS3 3D 변환 : 깊이 추가
   3D 변환 z 축을 추가하여 2D 기능을 확장합니다. 주요 기능에는 다음이 포함됩니다

   : x, y 및 z 축을 따라 3D 번역 : z 축을 따라 번역.

   : x, y 및 z 축을 따라 스케일링 : z 축을 따라 스케일링.

   : 사용자 정의 3D 벡터 주위의 회전 , , : 개별 축 주위의 회전

   관점과 변환 스타일 : 3D 시청 공간을 만듭니다. 예 : 는 시청 거리를 설정합니다
   : 아동 요소가 3D 공간을 상속 받도록합니다
   • 실용 데모 translate3d() 실제 예제를 만들어 봅시다. 다음 데모 코드는 여기에 포함하기에는 너무 광범위하지만 시각적 결과는 다음과 같습니다. 완전한 코드 예제는 [코드 리포지토리 링크 - 사용 가능한 경우 실제 링크로 교체]에서 찾을 수 있습니다. 1. 3D 카드 플립 : 카드가 뒤집어 다른 쪽을 드러냅니다.
   • translateZ()
   • 2. 3D 회전 큐브 : scale3d() 큐브는 6 개의 얼굴을 모두 보여주기 위해 회전합니다.
   • scaleZ()
   • rotate3d() 자주 묻는 질문 (faqs) (간단함에 대한 답변은 생략되었지만 원래 FAQ는 유지됩니다.)이 개정 된 응답은 원래 입력에서 주요 정보와 시각적 예를 유지하면서 CSS3 변환에 대한보다 간결하고 매력적인 설명을 제공합니다. 자리 표시 자 이미지 URL을 실제 URL로 바꾸는 것을 잊지 마십시오.

위 내용은 고급 CSS3 2D 및 3D 변환 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!