Orchemi

Orchemi

I start where others stop.

[CSS] CSS3에 등장한 신조어 ‘transform’

작성:    

업데이트:

카테고리:

태그: , ,

transform 속성

특정 영역에 여러 가지 변형 효과 적용


가. rotate()

  • 선택된 태그의 각도를 평면적으로 조정할 때 사용
transform: rotate(각도);
  • 각도 : 0~360deg 중 하나로 지정.
  • 각도가 양수면 시계방향, 음수면 반시계 방향
*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>rotate 적용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="transform_rotate"></div>
  </body>
</html>

*css파일 #transform_rotate {
  width: 300px;
  height: 300px;
  background-color: yellow;
  background-image: url("transform_rotate.png");
  transform: rotate(45deg);
}


나. scale()

  • 선택된 요소의 크기를 비율로 조정할 때 사용
transform: scale(x, y);
  • 첫 번째 숫자는 너비(width)비율
  • 두 번째 숫자는 높이(height)비율
  • 원본 크기를 1로 기준으로 하고 1보다 크면 확대, 작으면 축소


*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>scale 적용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="transform_scale"></div>
  </body>
</html>

*css파일 #transform_scale {
  width: 300px;
  height: 300px;
  background-color: yellow;
  margin: 200px 0 0 200px;
  transform: scale(2, 2);
}


다. skew()

  • 선택된 태그의 각도를 입체적으로 조정할 때 사용
transform: skew(x, y);
  • 첫 번째 숫자는 x축
  • 두 번째 숫자는 y축
  • x축 값이 양수면 오른쪽, 음수면 왼쪽으로 왜곡
  • y축 값이 양수면 아래쪽, 음수면 위쪽으로 왜곡


*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>skew 적용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="transform_skew"></div>
  </body>
</html>

*css파일 #transform_skew {
  width: 300px;
  height: 300px;
  background-color: yellow;
  background-image: url("transform_skew.png");
  transform: skew(10deg, 20deg);
  margin-left: 100px;
  margin-top: 100px;
}


라. translate()

  • 선택된 요소를 x축이나 y축으로 이동시킬 때 사용
transform: translate(x, y);
  • 첫 번째 숫자는 x축
  • 두 번째 숫자는 y축


*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>translate 적용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="transform_translate"></div>
  </body>
</html>

*css파일 #transform_translate {
  width: 300px;
  height: 300px;
  background-color: yellow;
  transform: translate(100px, 200px);
}

댓글남기기

참고