[CSS3] 2차원 변환 함수 -transform 속성-

CSS3 버전부터 transform 속성이 사용 가능해 졌습니다. 그리하여 2차원 변환이 가능한데요

2차원 변환은 무엇이고 transform 속성은 무엇인지 바로 예제를 통해서 확인하도록 하겠습니다.

일던 이렇게 HTML페이지를 구성 해줍니다.

그다음 style 태그 내부에다가 이렇게 코딩을 해줘요

그러면 실행 결과가 위처럼 나옵니다.

여기까지는 별다르게 어려운것 느끼지 못하실거에요

이제! transform속성이 등장할거에요!!(긴장중..)

결과물에서 네모 박스가 잘려나와서 margin:20px 를 추가해주세요

그리고!!! 벤더 프릭스를 사용해 줍니다.

여기서 -ms, -moz, -o, -webkit 이 내용이 무슨 의미인지 모르시는 분들은

벤더프릭스 정리 [링크 Click]

위에 링크를 클릭해 주셔서 읽어주시기 바랍니다.

그리고! rotate는 한글 뜻으로 회전하다 라는 뜻을 가지고 있습니다.

60deg는 60도 회전 이라는 의미 입니다.

따라서! 각 브라우저마다 벤더 프릭스를 적용 시켜주고 <div>태그를 60도 회전시켜주겠다~ 라는 의미입니다.

그러면 transform 속성의 변환 함수들에 대해서 알아보도록 할게요~

<2차원 변환(transform) 함수 총 정리>

변환 함수	설명
translate(translateX, translateY) translateX(translateX) translateY(translateY) scale(scaleX, scaleY) scaleX(scaleX) scaleY(scaleY) skew(angleX, angleY) skewX(angleX) skewY(angleY) rotate(angleZ)	특정 크기만큼 이동 X축으로 특정한 크기만큼 이동 Y축으로 특정한 크기만큼 이동 특정한 크기만큼 확대 및 축소 X축으로 특정한 크기만큼 확대 및 축소 Y축으로 특정한 크기만큼 확대 및 축소 특정한 각도만큼 기울림 X축으로 특정한 각도만큼 기울림 Y축으로 특정한 각도만큼 기울림 특정한 각도만큼 회전

[영단어 뜻]

rotate : 회전하다

skew : 비스듬이 움직이다

scale : 규모

translate : (다른형태로)바꾸다

2차원 변환 함수에 대하여 알아 보았으니 style 태그에서 좀 수정해보도록 할게요

일단! 회전(rotate)을 60도(60deg) 만큼 시켜주고 크기(scale)를 1.2배 확대 해주며 Y축으로 10도(10deg)만큼 기울려(skewY)준다.

※여기서 변환 함수 입력한 순서에 따라 실행 결과가 달라집니다~