변형

Internet Explorer 10 및 JavaScript로 작성된 Windows 8용 Windows 스토어 앱은 CSS3(Cascading Style Sheets, Level 3) 3-D 변형에 대한 지원을 추가합니다. CSS3 2-D 변형에 대한 지원은 Windows Internet Explorer 9에서 추가되었으며, JavaScript를 사용하는 Windows 스토어 앱에서도 지원합니다. 변형을 사용하면 플러그 인 없이도 2D 및 3D 공간에서 요소를 변환, 회전, 크기 조정할 수 있습니다. CSS3 3-D 변형은 W3C(World Wide Web 컨소시엄)의 CSS 변형 사양에 정의되어 있으며, 현재 작업 초안 단계입니다.

참고  수동으로 3D 변형을 지정하기 전에 변형 좌표계 및 렌더링에 대해 알아보는 것이 좋습니다.

참고  이 항목에서 설명하는 속성의 경우 전에는 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱과 작동하려면 Microsoft 특정 공급업체 접두사인 "-ms-"가 필요했습니다. 이제 이 접두사는 필요하지 않지만 여전히 인식됩니다. 향후 호환성을 보장하려면 Microsoft 공급업체 접두사를 사용하는, 변형 속성이 있는 응용 프로그램을 적절히 업데이트해야 합니다.

변형 속성

변형 함수 목록이 포함된 transform 속성을 사용하여 요소에 2D 및 3D 변형을 적용합니다. 속성 구문은 다음과 같습니다.

속성설명

transform

지정한 요소에 적용할 변형 함수를 나타냅니다(다음 섹션에 나열됨). transform 속성은 공백으로 구분된 변형 함수 목록이나 none 키워드(적용되는 변형 함수 없음)로 설정할 수 있습니다.

 

지원되는 변형 함수

다음은 Internet Explorer 10과 JavaScript로 작성된 Windows 8용 Windows 스토어 앱에서 지원되는 변형 함수 목록입니다. 각 함수 뒤에는 간단한 태그 샘플과 샘플의 효과를 보여 주는 그림이 있습니다. 지원되는 2-D 변형 함수를 보려면 변형 함수를 참조하세요.

순서가 중요하다는 것에 유의하세요. 변형 함수는 transform 속성 내에 나열된 순서대로 적용됩니다.

또한 z-축 구성 요소가 포함된 함수의 효과는 깊이를 제공하는 perspective 함수와 함께 사용할 때 가장 두드러집니다. 뒤에 나오는 태그 샘플과 그림에서는 묘사된 함수의 효과가 더 명확하게 나타나도록 perspective 함수와 기타 함수가 transform 속성에 추가되었습니다. IE 테스트 드라이브실습: 3D 변형(영문) 데모를 시도하여 여러 함수와 값 조합의 효과를 확인하는 것이 좋습니다.

원근

perspective(<length>)

perspective 함수는 요소를 표시할 때 사용되어 깊이를 제공하는 원근을 변경합니다. perspective 함수에 제공하는 값이 클수록 요소가 사용자로부터 멀어집니다. 값은 0보다 커야 하고 픽셀 단위로 제공됩니다.

<length>의 단위는 변환 함수에 제공된 단위와 같습니다. 즉, z 방향의 1px은 x 또는 y 방향의 1px과 동일한 거리입니다.

3D 행렬

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)

matrix3d 함수는 16개 값이 열 우선 배열로 포함된 같은 유형의 4×4 행렬로 3D 변형을 지정합니다. 다른 모든 변형 함수는 matrix3d 함수를 기반으로 합니다.

예제:


div {
  transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);

3D 변환

translate3d(<translation-value>, <translation-value>, <translation-value>)

translate3D 함수는 벡터 [tx,ty,tz]로 3D 변환을 지정합니다. 여기서 tx, tytz는 각각 첫 번째, 두 번째 및 세 번째 변환 값 매개 변수입니다.

예제:


div {
  transform: translate3d(20px, -60px, 50px); 
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: translate3d(20px, -60px, 50px);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

Z 방향 변환

translateZ(<translation-value>)

translateZ 함수는 z 방향으로 주어진 양만큼의 변환을 지정합니다. 비율 값은 허용되지 않습니다.

예제:


div {    
  transform: perspective(500px) translateZ(-60px);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: perspective(500px) translateZ(-60px);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

3D 크기 조정

scale3d(<number>, <number>, <number>)

scale3d 함수는 세 개의 매개 변수에 설명된 [sx,sy,sz] 크기 조정 벡터로 3D 크기 조정 작업을 지정합니다.

예제:


div {
  transform: scale3d(0.5, -0.5, 1.5);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: scale3d(0.5, -0.5, 1.5);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

Z 벡터 크기 조정

scaleZ(<number>)

scaleZ 함수는 [1,1,sz] 크기 조정 벡터를 사용하여 크기 조정 작업을 지정합니다. 여기서 sz는 매개 변수로 제공됩니다. scaleZ 함수의 효과는 다음 예제와 같이 rotate, perspective 등의 함수와 함께 사용할 때 가장 두드러집니다.

예제:


div {
  transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: perspective(500px) scaleZ(2) rotateX(45deg);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

3D 회전

rotate3d(<number>, <number>, <number>, <angle>)

rotate3d 함수는 시계 방향 3D 회전을 지정합니다. 요소는 처음 세 개의 매개 변수에 설명된 [x,y,z] 방향 벡터를 중심으로 마지막 매개 변수에 지정된 각도만큼 회전합니다. 방향 벡터가 단위 길이가 아닌 경우 정규화됩니다. 정규화할 수 없는 [0, 0, 0] 등의 방향 벡터를 지정하면 회전하지 않습니다.

예제:


div {
   transform: rotate3d(0.7, 0.5, 0.7, 45deg);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: rotate3d(0.7, 0.5, 0.7, 45deg);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

X 방향 회전

rotateX(<angle>)

rotateX 함수는 x축을 중심으로 주어진 각도만큼의 시계 방향 회전을 지정합니다.

예제:


div {
  transform: perspective(500px) rotateX(45deg);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: perspective(500px) rotateX(45deg);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

Y 방향 회전

rotateY(<angle>)

rotateY 함수는 y축을 중심으로 주어진 각도만큼의 시계 방향 회전을 지정합니다.

예제:


div {
  transform: perspective(500px) rotateY(45deg);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: perspective (500px) rotateY(70deg);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

Z 방향 회전

rotateZ(<angle>)

rotateZ 함수는 z축을 중심으로 주어진 각도만큼의 시계 방향 회전을 지정합니다.

예제:


div {
  transform: rotateZ(65deg);
}

결과:

사각형의 파란색 div와 흰색 텍스트에 다음 변형 함수 적용: transform: rotateZ(65deg);

연한 파란색 사각형은 변형된 요소의 원래 위치를 나타냅니다.

transform-origin 속성

transform-origin 속성은 요소의 변형 원점을 설정합니다.

예를 들면, transform 속성에 rotate3d 함수를 지정한 경우 이 속성은 요소가 회전하는 기준 지점을 정의합니다. 이 속성의 기본값은 "50% 50% 0px"(요소의 가운데)입니다.

속성설명

transform-origin

지정한 요소의 변형 원점을 나타냅니다. 이 속성은 1-3개 사이의 길이 값으로 설정됩니다.

  • 첫 번째 길이 값은 요소의 컨테이너 상자에 상대적인 x축의 위치를 지정합니다. 길이 값(지원되는 길이 단위), 비율 또는 다음 세 가지 키워드 중 하나일 수 있습니다. left는 컨테이너 상자 x축 길이의 0%를 나타내고, center는 중간 지점을 나타내고, right는 길이의 100%를 나타냅니다.
  • 두 번째 길이 값은 요소의 컨테이너 상자에 상대적인 y축의 위치를 지정합니다. 길이 값, 비율 또는 다음 세 가지 키워드 중 하나일 수 있습니다. top는 컨테이너 상자 y축 길이의 0%를 나타내고, center는 중간 지점을 나타내고, bottom는 길이의 100%를 나타냅니다.
  • 세 번째 길이 값은 요소의 컨테이너 상자에 상대적인 z축의 위치를 지정합니다. 길이 값이어야 합니다.

 

transform-style 속성

transform-style 속성은 중첩 요소를 3D 공간에 렌더링하는 방법을 정의합니다.

속성설명

transform-style

중첩 요소를 3D 공간에 렌더링하는 방법을 정의합니다. 요소에 대해 이 속성을 flat으로 설정하면 모든 자식 요소가 평면화되어 요소의 2D 평면에 렌더링됩니다. x축이나 y축을 중심으로 요소를 회전하면 양수 또는 음수 z 위치에 있는 자식 요소가 요소 앞이나 뒤가 아니라 요소 평면에 나타납니다.

 

참고  W3C 사양에서는 이 속성에 대해 키워드 값 preserve-3d를 정의하며, 이 경우 평면화가 수행되지 않습니다. 지금은 Internet Explorer 10에서 preserve-3d 키워드를 지원하지 않습니다. 부모 요소의 변형을 각 자식 요소와 자식 요소의 일반 변형에 수동으로 적용하면 이 문제를 해결할 수 있습니다.

perspective 속성

perspective 속성은 요소 자체의 변형이 아니라 배치되었거나 변형된 요소 자식에만 적용된다는 점을 제외하고 perspective 변형 함수와 동일한 변형을 적용합니다.

속성설명

perspective

속성이 적용되는 요소의 배치되었거나 변형된 자식에 perspective 변형 함수와 동일한 변형을 적용합니다. 이 속성은 누적 컨텍스트와 컨테이너 블록을 설정하는 숫자나 원근 변형이 적용되지 않음을 나타내는 none 키워드로 설정할 수 있습니다.

 

perspective-origin 속성

perspective-origin 속성은 perspective 속성의 원점을 설정합니다.

속성설명

perspective-origin

perspective 속성의 원점을 설정합니다. 실제로 사용자가 요소 자식을 보는 xy 위치를 설정합니다. 이 속성은 1-2개의 길이 값으로 설정됩니다.

  • 첫 번째 길이 값은 요소의 컨테이너 상자에 상대적인 x축의 위치를 지정합니다. 길이 값(지원되는 길이 단위), 비율 또는 다음 세 가지 키워드 중 하나일 수 있습니다. left는 컨테이너 상자 x축 길이의 0%를 나타내고, center는 중간 지점을 나타내고, right는 길이의 100%를 나타냅니다.
  • 두 번째 길이 값은 요소의 컨테이너 상자에 상대적인 y축의 위치를 지정합니다. 길이 값, 비율 또는 다음 세 가지 키워드 중 하나일 수 있습니다. top는 컨테이너 상자 y-축 길이의 0%를 나타내고, center는 중간 지점을 나타내고, bottom는 길이의 100%를 나타냅니다.

 

backface-visibility 속성

backface-visibility 속성은 사용자를 마주 볼 때 변형된 요소의 "뒷면"(반대쪽)을 표시할지 여부를 나타냅니다. 변형되지 않은 요소의 경우 요소의 앞면이 사용자를 향하도록 표시됩니다.

속성설명

backface-visibility

변형된 요소의 반대쪽을 표시할지 여부를 결정합니다. 이 속성은 다음 두 개의 키워드 값 중 하나로 설정할 수 있습니다.

visible

반대쪽이 표시됨을 나타냅니다.

hidden

뒷면이 표시되지 않음을 나타냅니다.

 

API 참조

Transforms

샘플 및 자습서

CSS 변형, 전환 및 애니메이션을 사용하여 웹 페이지에 생기를 불어넣는 방법

Internet Explorer 테스트 드라이브 데모

CSS 변형 및 애니메이션을 사용하여 독창적인 페이지 작성
실습: 3D 변형
실습: 2D 변형
Flickr Postcards

IEBlog 게시물

CSS를 사용한 전체 페이지 애니메이션
IE10의 CSS3 3D 변형

사양

CSS 변형

관련 항목

CSS3 2D 변형 이해

 

 

표시:
© 2014 Microsoft