[HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들

 

 

[HTML+CSS][CSS3와 애니메이션] 01 - 변형

 

단순히 변형되는 것들에 대해 지난 시간에 배웠다면

이번에는 변형할 때 기준이 되는 지점을 바꾸거나

요소의 원근감을 표현할 수 있는 속성들에 대해서 알아보도록 하자.

 

 

---

 

 

transform-origin 속성 : 변형 기준점 설정

 

 

transform 속성에 쓰이는 변형함수는 

x축과 y축, z축을 기준으로 변형하였지만
transfroem-origin 속성을 사용하면 

축이 아닌 특정 지점을 현형의 기준으로 설정할 수 있다.

 

 

 

 

 

---

 

 

perspective, perspective-origin 속성 : 원근감 표현

 

perspective 속성

3차원 변형에서 사용하는 속성으로 

원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 한다.

이때 속성 값이 0보다 커야 하며 값이 클수록 사용자로부터 멀어진다.

 

perspective-origin 속성

입체적으로 표현할 요소의 아랫부분(bottom) 위치를 지정할 수 있기 때문에
perspective 속성보다 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 줄 수 있다.

 

 

 

 

---

 

 

transform-style 속성 : 3D 변형 적용

 

 

여러가지 변형을 동시에 적용할 때 사용하는 속성으로
부모 요소에 적용한 3D 변형을 하위 요소에도 적용할 수 있다.

 

 

 

 

---

 

 

backface-visibility 속성 : 요소의 뒷면 표시

 

 

요소의 뒷면인 반대쪽 면을 표시할 것인지를 결정할 수 있는 것이다.

 

 

 

 

---

 

 

기준점을 바꾸고 원근감과 뒷면 표시 등

변형의 종류가 굉장히 다양한 것 같다.

 

헷갈리지 않게 잘 기억해야 할 것 같다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※