IE10의 CSS3 3D 변환 기능

CSS3 기능으로 풍부하고 몰입감이 뛰어난 웹 경험을 손쉽게 구현할 수 있습니다. 최근 글에서 웹 개발자들이 CSS3 전환 기능과 애니메이션을 사용하여 개성 넘치는 사이트를 만드는 방법을 설명드린 바 있습니다. CSS3 3D 변환 기능은 개발자들이 더욱 매력적인 사이트를 만들 수 있도록 말 그대로 새로운 차원의 날개를 달아드립니다. 예를 들어 Windows 8 Metro 스타일의 시작 화면은 눌린 타일을 강조하기 위해 아래와 같이 미묘한 3D 변환 기능을 사용합니다.

Internet Explorer 10에서 표시되는 눌리지 않은 타일(왼쪽)과 눌린 타일(오른쪽)

CSS 변환을 통한 3차원 구현

CSS3 2D 변환과 같이 3D 변환도 HTML 요소에 기하학적인 변환 작업을 적용하는 CSS transform 및 transform-origin 속성에 대한 기능과 값을 제공합니다. CSS 3D 변환 기능은 변환 함수를 확장하여 3D 변환을 가능하게 합니다. rotate(), scale(), translate(), skew(), matrix() 등의 변환 함수는 Z 좌표 매개변수(matrix3d()의 경우에는 10개의 추가 변수)를 사용하고 rotateZ() 및 scaleZ()와 같은 추가 변환 함수를 만들어서 3D 공간을 아우르며 확장합니다.

새로운 perspective 변환 함수는 먼 지점은 작게 표시함으로써 변환된 요소에 깊이를 표현합니다.

또한 CSS3 3D 변환 기능에서는 몇 가지 새로운 CSS 속성을 추가합니다. IE10은 transform 및 transform-origin 속성뿐만 아니라 공급업체 접두사 perspective, perspective-origin, backface-visibility 및 transform-style의 flat 값을 지원합니다.

참고: 이 글에서 마크업 예시는 모두 W3C 표준에 정의된 대로 접두사가 없는 속성을 사용합니다. 하지만 현재 이러한 기능을 구현하는 모든 브라우저는 공급업체별 접두사를 사용하고 있습니다. 이 함수를 시험할 때 예시 마크업에 브라우저의 접두사를 추가하십시오.

원근법

perspective 변환 함수는 3D 변환에서 중요합니다. 이 함수는 보는 사람의 위치를 설정하고, 보이는 콘텐츠를 나중에 2D 보기 평면에 투사하는 보기 피라미드에 매핑합니다. 원근법을 지정하지 않으면 z 공간의 모든 점이 동일한 2D 평면 위로 합쳐지며 변환된 결과에서 깊이를 인식할 수 없게 됩니다. 아래에 나와 있는 것처럼 Z축을 따라 변환할 경우에는 변환 효과가 표현되도록 원근법 변환 함수를 반드시 사용해야 합니다.

아래의 예시에서 는 변환되지 않은 원본 요소이며 는 변환된 요소입니다.

transform: perspective(500px) translate(0px, 0px, -300px);		transform: translate(0px, 0px, -300px);
transform: perspective(500px) rotateY(30deg);		transform: rotateY(30deg);

여러 요소에 원근법 변환 기능을 손쉽게 추가하려면 상위 요소에 perspective 속성을 사용하면 됩니다. perspective 속성은 각 하위 요소에 원근법 변환을 적용합니다.

#parent {

perspective: 500px;

}

 

#div1 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg);

}

 

#div2 {

position: absolute;

transform-origin: 0px 0px;

transform: rotateY(30deg) translate(220px);

}

perspective-origin 속성은 요소의 중심에서 시점을 이동하기 위해 perspective와 함께 사용할 수도 있습니다.

아래 그림을 보시면 근원 시점이 왼쪽으로 이동하면서 원래 근원 시점이 있던 곳의 오른쪽의 콘텐츠가 더 멀리 있는 것처럼 느껴집니다.

#parent {

perspective: 500px;

perspective-origin: -300px 0px;

}

뒷면 보이기

backface-visibility 속성은 콘텐츠의 뒷면을 숨기는데 유용합니다. 기본적으로 뒷면은 보이도록 되어 있으며 뒤집혀도 변환된 콘텐츠를 볼 수 있습니다. 하지만 backface-visibility가 hidden으로 설정되어 있으면 요소가 회전했을 때 앞면이 보이지 않게 되는 식으로 콘텐츠가 보이지 않게 됩니다. 아래에 소개된 카드의 예시와 같이 여러 면이 있는 개체를 시뮬레이션할 때 유용하게 사용할 수 있습니다. backface-visibility를 hidden으로 설정해서 쉽게 앞면만 보이도록 할 수 있습니다.

CSS 마크업:

.card, .card div {

position: absolute;

width: 102px;

height: 143px;

}

 

.card div:nth-child(1) {

background-image: url('redback.png');

}

 

.card div:nth-child(2) {

background-image: url('8clubs.png');

backface-visibility: hidden;

}

카드 하나를 위한 HTML 마크업:

<div class="card"><div></div><div></div></div>

위에서 정의한 것처럼 6장의 카드를 만들고 각각 다른 회전값 n과 style="transform: rotateY(ndeg)" 속성을 부여하면 다음과 같은 결과가 나타납니다.

rotateY(0deg);	rotateY(36deg);	rotateY(72deg);	rotateY(108deg);	rotateY(144deg);	rotateY(180deg);

이 예시에서 회전이 없는 경우에는 드로잉 순서에서 맨 처음에 위치해 있기 때문에 두 번째 div 클럽의 8이 나타납니다. 카드에 회전을 적용하고 90도로 넘기면 두 번째 div의 backface-visibility: hidden; 속성이 카드가 보이지 않도록 하면서 첫 번째 div, 즉 카드의 뒷면이 나타나게 됩니다.

애니메이션과 전환 기능이 추가된 3D 변환

3D 변환 기능의 가장 좋은 점은 CSS 전환 및 애니메이션과 함께 사용할 수 있다는 것입니다. CSS3 3D 변환의 CSS3 애니메이션을 지원하는 IE10 또는 기타 브라우저를 사용하고 있다면 transform 속성을 움직여 만든 스크롤 텍스트 예시를 시도해 보십시오.

아래의 스크린샷에 나와 있는 효과를 만들 수 있는 CSS 마크업입니다.

#parentDiv {

perspective: 500px;

perspective-origin: 150px 500px;

}

 

#div1 {

transform-origin: 150px 500px;

animation: scrollText 200s linear infinite;

}

 

@keyframes scrollText {

0% { transform: rotateX(45deg) translateY(500px); }

100% { transform: rotateX(45deg) translateY(-8300px); }

}

지금 시작해 보세요

Windows 개발자 프리뷰에서 이러한 함수들을 IE10에 사용해 보시기 바랍니다. 이 테스트 드라이브 데모의 Hands On: 3D 변환 기능을 이용하면 CSS 3D 변환으로 가능한 일들을 눈으로 직접 확인할 수 있습니다.

여러분도 멋진 작품을 만들어 보시기 바랍니다.

- Internet Explorer 그래픽 수석 프로그램 관리자, Jennifer Yu