소개
오랫동안 3D는 데스크톱 응용 프로그램의 보존이 되어 왔습니다. 최근 기본 GPU 가속에 액세스할 수 있는 고급 스마트폰이 출시됨에 따라 거의 모든 곳에서 3D가 사용되기 시작했습니다.
일반적으로 3D는 주로 게임 또는 일부 고급 사용자 인터페이스용 기기로 사용됩니다. WPF와 Silverlight에 Perspective 변환을 도입하기 전에는 사용자 인터페이스 요소에 3D 효과를 적용하기에 적합한 모델이 애플리케이션 개발자에게 실용적인 솔루션이 되었습니다 (3D가 모두 쉽지는 않다).
CSS 3D 변환 모델은 2009년 3월에 애플리케이션 작성자가 3D 관점 변환을 모든 시각적 DOM 요소에 적용할 수 있어 3D를 활용하는 흥미롭고 매력적인 사용자 인터페이스를 만들 수 있도록 초안 사양으로 도입되었습니다.
CSS 3D 변환 작업 초안은 CSS 2D 변환 모델의 논리적 확장으로, 3D 공간에서의 원근법, 회전 및 변환과 같은 추가 속성을 제공합니다.
이전에는 이렇게 쉽게 3D 인터페이스를 빌드할 수 없었습니다. 이러한 기술은 진입 장벽을 낮추었습니다. 더 이상 3D 요소를 만들기 위해 수학적 지식이 뛰어나지 않아도 됩니다.
CSS 3D 모듈은 개발자가 풍부하고 시각적으로 흥미로운 애플리케이션을 빌드하는 데 도움이 되도록 설계되었으며, 몰입형 3D 세계를 빌드할 수 있도록 설계되지는 않았습니다.
브라우저 지원 및 하드웨어 가속
-webkit-perspective
-webkit-transform-3d
브라우저에서 3D를 "지원"할 수 있지만 하드웨어 및 드라이버 제한으로 인해 3D를 렌더링하지 못할 수 있음을 기억해야 합니다. DOM 기반 3D 장면은 계산 비용이 많이 들 수 있습니다. 따라서 브라우저 공급업체는 순수한 소프트웨어 렌더링 솔루션으로 브라우저 속도를 낮추는 대신 일부 플랫폼에서 사용할 수 없는 GPU를 활용하기로 결정했습니다.
기능 감지
특성 감지는 어떨까요? 당신이 묻지 않기를 바랐어요! 개발자는 Modernizr와 같은 도구를 사용하여 특정 브라우저 기능 및 기능에 대한 지원을 감지하고 있습니다. 3D 변환에 대한 지원 여부를 감지할 수는 있지만, 하드웨어 가속의 존재는 감지할 수 없으며, 하드웨어 가속이 핵심 요소입니다.
기본 샘플
바로 뛰어드는 것만큼 좋은 것도 없습니다. 이 샘플에서는 임의의 DOM 요소의 기본 회전 세트를 적용합니다.
먼저 루트 요소에 대한 관점을 정의합니다.
<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">
원근법은 3D 장면의 깊이가 렌더링되는 방식을 정의하기 때문에 중요합니다. 1~1000의 값은 눈에 띄는 효과를 내며 1,000 이상의 값은 감소합니다. 그런 다음 iframe을 추가하고 Z축과 Y축을 중심으로 30도 회전을 적용합니다.
<iframe
src="http://www.html5rocks.com/"
style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>
성공입니다. 즉, 요소는 완전한 대화형이며 모든 면에서 완전한 DOM 요소입니다 (지금은 훨씬 더 멋져 보이네요). 브라우저가 3D 변환을 지원하지 않으면 아무 일도 일어나지 않습니다. 회전이 적용되지 않은 간단한 iframe만 표시됩니다. 브라우저가 3D 변환을 지원하지만 하드웨어 가속을 지원하지 않는다면 조금 이상하게 보일 수 있습니다.
애니메이션
CSS3 3D 변환의 장점은 CSS 전환 모듈과 근사하게 연결된다는 점입니다. 애니메이션과 전환은 CSS에서 쉽게 정의할 수 있으며, 이를 3D에 적용하는 것도 예외가 아닙니다.
3D 원근법이 적용된 요소에 애니메이션을 적용하는 방법은 간단합니다. 간단히 'transition' 스타일을 'transform'으로 설정하고 지속 시간과 애니메이션 함수를 연결합니다. 그때부터 'tranform' 스타일을 변경하면 애니메이션이 적용됩니다.
인라인 스타일이 아닌 문서 스타일을 사용하도록 이전 예를 리팩터링했습니다. 이렇게 하면 예시가 명확해질 뿐만 아니라 샘플에서 :hover 의사 선택기를 활용할 수 있습니다. :hover 선택기를 사용하면 요소 위로 마우스를 이동하기만 하면 전환을 시작할 수 있습니다. 사용하든,
요약
지금까지 CSS 3D 변환을 사용하여 모든 시각적 DOM 요소에 적용할 수 있는 멋진 효과들을 간단히 살펴보았습니다. 이 튜토리얼에서 다루지 않았지만 수행할 수 있는 작업이 많이 있습니다.