3D 및 CSS

Paul Kinlan

소개

오랫동안 3D는 데스크톱 애플리케이션의 전유물이었습니다. 최근에 기본 GPU 가속에 액세스할 수 있는 고급 스마트폰이 출시됨에 따라 거의 모든 곳에서 3D가 사용되는 것을 볼 수 있습니다.

일반적으로 3D는 주로 게임 또는 일부 고급 사용자 인터페이스용 기기로 사용됩니다. WPF 및 Silverlight에서 원근 변환이 도입되기 전까지는 사용자 인터페이스 요소에 3D 효과를 적용하는 데 적합한 모델이 애플리케이션 개발자에게 실용적인 솔루션이 되지 못했습니다. 3D는 결코 쉽지 않기 때문입니다.

CSS 3D 변환 모델은 2009년 3월에 초안 사양으로 도입되었습니다. 이 모델을 사용하면 웹 개발자가 애플리케이션 작성자가 시각적 DOM 요소에 3D 원근 변환을 적용할 수 있도록 허용하여 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~1,000의 값은 매우 뚜렷한 효과를 내고 1,000을 초과하는 값은 그보다 덜 뚜렷한 효과를 냅니다. 그런 다음 iframe을 추가하고 Z 및 Y 축을 중심으로 30도 회전을 적용합니다.

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

BAM! 이제 요소가 완전히 상호작용이 가능하며 모든 면에서 완전한 DOM 요소입니다 (이제 더 멋지게 표시된다는 점을 제외하고). 브라우저에서 3D 변환을 지원하지 않으면 아무 일도 일어나지 않습니다. 회전이 적용되지 않은 간단한 iframe이 표시됩니다. 브라우저가 3D 변환을 지원하지만 하드웨어 가속은 지원하지 않는 경우 약간 이상하게 보일 수 있습니다.

애니메이션 처리

CSS3 3D 변환에서 마음에 드는 점은 CSS 전환 모듈과 멋지게 연결된다는 점입니다. 애니메이션과 전환은 CSS에서 쉽게 정의할 수 있으며 3D에 적용하는 것도 예외가 아닙니다.

3D 원근법이 적용된 요소에 애니메이션을 적용하는 것은 쉽습니다. 'transition' 스타일을 'transform'으로 설정하고 재생 시간과 애니메이션 함수를 연결하기만 하면 됩니다. 그 이후부터는 '변환' 스타일 변경사항이 애니메이션으로 적용됩니다.

인라인 스타일이 아닌 문서 스타일을 사용하도록 이전 예시를 리팩터링했습니다. 이렇게 하면 예시가 지워질 뿐만 아니라 샘플에서 :hover 의사 선택기를 활용할 수 있습니다. :hover 선택기를 사용하면 마우스를 요소 위로 가져가기만 하면 전환을 시작할 수 있습니다. 좋습니다.

요약

CSS 3D 변환을 사용하여 표시되는 모든 DOM 요소에 적용할 수 있는 멋진 효과를 간단히 살펴봤습니다. 이 튜토리얼에서 다루지 않은 작업도 많이 있습니다.