CSS3 Transforms 2D

Transform은 CSS3에 새로 추가된 효과이다.

이 효과를 이용하면 요소의 모양 변형, 위치 이동, 크기 변경 등의 효과를 줄 수 있다. 여기서 살펴볼 효과들은 2차원(평면적인) 효과들이다.

translate()

translate() 요소의 위치를 현재 위치로부터 주어진 가로와 세로 값 만큼 이동시켜준다.

예)
-ms-transform : translate(50px,100px); /* MS IE 9 */
-webkit-transform : translate(50px,100px); /* chrome, safari, opera */
transform : translate(50px,100px);

위 예는 구성요소를 현재 위치에서 오른쪽으로 50px 아래로 100px 이동시켜준다.

[예제]

JS Bin

rotate()

rotate()는 객체를 주어진 각도만큼 회전시켜준다. 예) -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); JS Bin

scale()

scale()은 요소의 크기를 변화시켜준다. 예를 들어 scale(2,4)를 가로로 2배, 세로로 4배 키워준다.

예)
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
transform: scale(2,4);
JS Bin

 

skew()

skew()는 가로축과 세로 축을 지정한 각도로 틀어주는 기능을 한다.

예)
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
transform: skew(30deg,20deg);

JS Bin

 

matrix()

matrix()는  위의 전환효과들을 모두 사용할 수 있는 통합 기능이라고 보면 된다. matrix()는 다분히 수학적인 계산을 고려하여 결과를 도출하는데 쉽게 접근하기는 어렵다. 아래의 사이트에서 matrix() 2D 값의 변화와 모양을 확인해볼 수 있다.

http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dexplorer.html

 

 

 

 

 

 

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기