[기본 개념] 5 | (5.1) 변형

[기본 개념] 5 | (5.1) 변형

1> 변형

2 트렌지션

3 애니메이션

1 변형

transform과 변형함수

 

기본형

transform : 함수

 

 변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 한다.

 

2차원 변형함수

종류	설명
translate(tx, ty)	지정한 크기만큼 x축, y축으로 이동
translateX(tx)	지정한 크기만큼 x축으로 이동
translateY(ty)	지정한 크기만큼 y축으로 이동
scale(sx, sy)	지정한 크기만큼 x축과 y축으로 확대, 축소
scaleX(sx)	지정한 크기만큼 x축으로 확대, 축소
scaleY(sy)	지정한 크기만큼 y축으로 확대, 축소
rotate(각도)	지정한 각도만큼 회전
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡
skewX(ax)	지정한 각도만큼 x축으로 왜곡
skewY(ay)	지정한 각도만큼 y축으로 왜곡

 

3차원 변형함수

종류	설명
translate3d(tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동
translateZ(tz)	지정한 크기만큼 z축으로 이동
scale3d(sx, sy, sz)	지정한 크기만큼 x축, y축, z축으로 확대, 축소
scaleZ(sz)	지정한 크기만큼 z축으로 확대, 축소
rotate(rx, ry, 각도)	지정한 각도만큼 회전
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전
rotateX(각도)	지정한 각도만큼 x축으로 회전
rotateY(각도)	지정한 각도만큼 y축으로 회전
rotateZ(각도)	지정한 각도만큼 z축으로 회전
perspective(길이)	입체적으로 보일 수 있게 깊이값을 지정

 

웹 요소를 이동시키는 translate( ) 함수

 

 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동한다. tx, ty, tz의 값이 주어지지 않으면 0으로 간주한다.

 

(ex. translate( ) 함수를 사용해 웹 요소 이동하기)

 

...
  #movex:hover { transform : translateX(50px); }		// x축으로 50px 이동
  #movey:hover { transform : translateY(20px); }		// y축으로 20px 이동
  #movexy:hover { transform : translate(10px, 20px); }      	// x축으로 10px, y축으로 20px 이동
</style>
...

 

요소를 확대, 축소하는 scale( ) 함수

 

 지정한 크기만큼 확대하거나 축소한다. sx, sy, sz의 값이 1보다 크면 확대되고 1보다 작으면 축소된다.

 

(ex. scale( ) 함수를 사용해 확대, 축소하기)

 

...
  #scalex { transform : scaleX(2); }		// x축으로 2배 확대
  #scaley { transform : scaleY(1.5); }		// y축으로 1.5배 확대
  #scale { transform : scale(0.7); }		// x, y축으로 0.7배 확대
</style>
...

 

요소를 회전시키는 rotate( ) 함수

 

2차원 rotate( ) 함수

기본형

transform : roate(각도)

 

 회전 각도가 양수일 경우 오른쪽(시계 방향)으로 회전, 음수일 경우 왼쪽(반시계 방향)으로 회전한다.

 

(ex. 함수를 사용해 2차원에서 회전하기)

 

...
  #rotate1:hover { transform : rotate(40deg); }	   	    // 오른쪽으로 40도 회전
  #rotate2:hover { transform : rotate(-40deg); }	    // 왼쪽으로 40도 회전
</style>
...

 

3차원 rotate( ) 함수

 3차원 rotate( ) 함수는 x축, y축, z축을 기준으로 회전한다. 

 

 이때 perspective 속성을 사용하면 원근감을 추가할 수 있는데, 회전 형태를 입체적으로 표현할 수 있다.

 

 perspective 속성은 3차원 변형에서만 사용할 수 있고, 속성값은 0보다 커야 하는데 값이 클수록 사용자로부터 멀어진다.

 

perspective 속성은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다.

 

(ex. rotate( ) 함수를 사용해 3차원에서 회전하기)

 

...
  .origin {
    ...
    perspective : 200px;		// 원근감 추가
  }
  .origin > div {
    ...
    transition : all 3s;		// 3초 동안 회전하도록 트랜지션 적용
  }
  #rotatex:hover { transform : rotateX(55deg); }	// x축으로 55도 회전
  #rotatey:hover { transform : rotateY(55deg); }	// y축으로 55도 회전
  #rotatez:hover { transform : rotateZ(55deg); }	// z축으로 55도 회전
  #rotatexyz:hover { transform : rotate3d(2.5, 1.2, -1.5, 55deg); }
  // x, y, z축에 방향 벡터를 지정하고 55도 회전

</style>
...
<div class="origin">
  <div id="rotatex"></div>
</div>
<div class="origin">
  <div id="rotatey"></div>
</div>
<div class="origin">
  <div id="rotatez"></div>
</div>
<div class="origin">
  <div id="rotatexyz"></div>
</div>
...

 

요소를 비틀어 왜곡하는 skew( ) 함수

 

 지정한 각도만큼 요소를 비틀어 왜곡하는데 이때 양쪽 방향으로 비틀거나 한쪽 방향으로만 비틀 수도 있다.

 

 skewX( ) 함수는 각도값이 양수이면 왼쪽이 올라가고, 오른쪽이 내려간다.

 skewY( ) 함수는 각도값이 양수이면 오른쪽이 올라가고, 왼쪽이 내려간다.

 

(ex. skew( ) 함수를 사용해 도형 비틀기)

 

...
  #skewx:hover { transform : skewX(30deg); }	// x축 기준으로 30도 비틀기
  #skewy:hover { transform : skewY(15deg); }	// ㅛ축 기준으로 15도 비틀기
  #skewxy:hover { transform : skew(-25deg, -15deg); }	
  // x축 기준으로 -25도, y축 기준으로 -15도 비틀기
</style>
...

 

 텍스트 영역에 skew( ) 함수를 적용하면 이미지를 사용하지 않고 도형의 형태를 만들 수 있다.

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)