<HTML5+CSS3>변형과 관련된 속성들

transform-origin속성 –변형 원점 설정하기

-이 속성은 지정한 요소의 변형 원점을 설정하는 것이다. transform속성과 함께 사용한다.

 

속성 값

(1) x축:원점에서 x 좌표값으로, 길이 값이나 백분율 left,center,right중에서 사용가능

(2) y축:원점에서 y 좌표값으로, 길이 값이나 백분율 top,center,bottom중에서 사용가능

(3) z축:원점에서의 z좌표값으로, 길이 값만 사용 가능

 

예를 들어 왼쪽 윗 부분을 기준으로 회전이나 왜곡 같은 변형을 실행하려면 다음처럼 지정한다.

ex)trnasform-origin:left top; ->트랜스폼의 기준을 왼족 윗부분으로

 

perspective-원근감 표현하기

-원래 있던 위치에서 사용자가 있는 방향이나 혹은 반대 방향으로 잡아당기거나 밀어내어 원근감을 갖게 합니다. 값은 0보다 커야하며 값이 클수록 사용자로부터 멀어집니다.

 

속성 값

(1)크기 : 원래 있던 위치에서 사용자가 있는 쪽으로 얼마나 이동하는지

(2)noen: perspective를 지정하지 않는다 (기본 값)

 

ex)perspective:200px; ->앞으로 200px 장아당김

 

perspective-origin속성 – 원근감 조절하기

-이 속성은 3D요소의 bottom부분의 위치를 지정한다. 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 만들 수 있다. 이 속성을 사용하려면 perspective속성과 함께 사용해야 한다.

ex)perspective-origin : x축 값 | y축 값 ;

 

속성 값

(1)x축:3D요소가 x축에서 어디에 위치하는지 지정한다. 값은 %,left,right,center,top,bottom 기본값은 50%입니다

(2)y축:3D요소가 y축에서 어디에 위치하는지 지정. 사용할 수 있는 값은 백분율,top,center,bottom이다 기본값은 50%이다.

 

다음 예는 y축을 기준으로 회준 후 perspective속성을 이용해 원근감을 추가한 것이다. 오른쪽 아래 모서리를 기준으로 해서 perspective속성에서 지정한 만큼 잡아당긴 것이다.

ex)perspective-origin:right bottom; ->원근감의 기준을 오른쪽 아랫부분으로

 

 

transform-style속성-3D변형 적용하기

-변형이 적용된 요소의 하위 요소에 3D변형을 적용할 것인지 결정합니다.

 

속성 값

(1)flat : 하위 요소를 평면으로 처리합니다.

(2)preserve-3d : 하위 요소들에 3D효과를 적용합니다.

 

예를 들어, 하위 요소들에 3D속성을 전달한다면 다음과 같이 작성합니다.

ex)transform-style:preserve-3d; - > 하위 요소들에 3d속성 전달

 

backface-visibility속성 – 요소의 뒷면 표시하기

-이 속성은 요소의 뒷면 즉 반대쪽 면을 표시할 것인지를 결정하는 것입니다.

단순히 이미지를 표시할 때는 그 차이를 느낄 수 없지만, 요소를 회전시키는 애니메이션을 만들었을 경우 요소의 뒷면이 사용자에게 보이지 않도록 할 때 사용하면 편리하다.

 

속성 값

(1)visible : 뒷면을 표시합니다

(2)hidden : 뒷면을 표시하지 않습니다.

 

예를 들어 180도 회전시켰을 때 요소의 뒷면이 나타나는데, 다음과 같이 지정하면 요소의 뒷면도 표시할 수 있다.

ex) backface-visibillity:visible; ->뒷면이 보이게