<HTML5+CSS3>변형

2차원 3차원 좌표계

-변형이랑 웹 요소의 위치를 옮기거나 크기를 조절하고 회전,왜곡 시키는 것을 변형이라고 한다. 단순히 수평이나 수직으로 이동하고 회전하는 것뿐만 아니라, 원근감을 추가한 3차원 변형도 가능하다.

2차원 좌표: x축과 y축 이동 가능

3차원 좌표:원근감을 더한 것 (z 축에서 앞뒤로 이동하는 것)

 

 

transform속성 – 웹 요소 변형하기-

-예를 들어 수평으로 50px 수직으로 100px 이동시키려면 translate라는 변형 항수를 사용합니다

ex)transfrom:translate(50px, 100px) -> x축으로 50 px, y축으로 100px 이동

이 속성은 여러 가지 변형 함수를 사용할 수 있다 2차원 변형이나 3차원 변형 모두 가능하다.

 

transform 변형 함수 값

 

translate-요소 이동시키기

-x축과 y축, z축으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다

앞에 그림 transform:translate들을 참고하면 된다.

transform:translate(tx,ty) : x축 방향으로 tx만큼 y축 방향으로 ty만큼 이동한다. tx와 ty 두 가지 값을 사용하지만 ty값이 주어지지 않으면 0으로 간주한다.

%transform:translate3d에(tz가 추가되면 앞뒤로 이동)

 

예를 들어 수평 방향으로만 50px 이동시키고 싶으면

ex) transform:translateX(50px); -> X를 넣어 X축으로 이동한다고 알려준다.

 

%이또한 완벽한 표준이 정해지지 않아 앞에 브라우저 별 접두사인 –webkit-나-moz-같은 것을 붙여야 한다.

 

scale-요소 확대/축소 하기

-지정한 크기만큼 확대 or 축소 합니다.

transform:scale(sx,sy) ->sy값이 주어지지 않는다면 sx값과 같다고 간주한다.

transform:scale(sx,sy,sz)

X축만큼 OR Y OR　Z만큼 이동하고 싶으면 (괄호)안에 1개축만 넣으면 됩니다.

transform;scaleX(sx) : x축 방향으로 sx만큼 확대한다 scale(sx,1)과 같다.

 

예를 들어 수평과 수직 방향으로 1.5배씩 확대하고 싶다면 ,

ex)transform:scale(1.5)또는 transform:sclae(1.5 1.5) ->가로 세로 1.5배 확대

 

rotate-요소 회전하기

-지정한 각도만큼 웹 요소를 회전한다. x,y,z축을 기준으로 회전할 수 있다.

ex)transform:rotate:(rx,ry,각도)

transform:rotate:(rx,ry,rz 각도)

%rotate변형에서 사용하는 각도는 도를 사용하거나 radian값을 사용한다.

1 radian= 1/ 180 도 이다.

 

예를 들어 x축을 기준으로 45도 회전한다면 다음과 같이 사용한다.

ex)transform:rotateX(45deg);

 

 

skew-요소를 비틀어 왜곡하기

-지정한 각도만큼 요소를 비틀어 왜곡한다. 양쪽 방향으로 또는 한쪽 방향으로만 비틀 수 있다.

ex) (1)transform:skew(각도,각도)

(2)transform:skreX(각도) OR Y각도

(1)- 첫 번째 각도는 x축에서의 왜곡 각도, 두 번째 각도는 y축에서 왜곡 각도 값이 주어지지 않으면 y축에 왜곡각도를 0으로 간주 따라서 y축으로는 왜곡존재 X

(2)-각각의 축에서만 주어진 각도만큼 왜곡

 

ex)transform:skew(30deg); -> x축 기준으로 30도 왜곡

 

<<별도 %transform-origin:right top; 이 것은 변형의 원점을 right top으로 하여 회전이 오른쪽 윗 부분에서 시계 방향으로 진행되게끔 하는 속성이다 . 579page참고>>