Home
CSS
애니메이션

transform 확대, 축소 효과 주는 방법 - scale

transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면(2D)에서의 확대 또는 축소입니다.
1 min read

transform / scale

  • transform의 scale로 요소를 확대 또는 축소할 수 있습니다.
  • 평면(2D)에서의 확대 또는 축소입니다.

 

기본형

transform : scale ( value );
  • value에 값을 입력합니다.
  • 1은 원래의 크기이고 0.5, 1.5와 같은 배율로 지정할 수 있습니다.

 

예제

 

같이 보면 좋은 글

 

기타 CSS 참조

애니메이션으로 돌아가기

You may like these posts

  • 글자 위로 밑줄 긋기 - text-decoration
    text-decoration text-decoration은 글자 위로 밑줄을 긋거나 취소선을 표시할 수 있습니다.   기본형 text-decoration : none | line-through | overline | underline none : 선을 만들지 않습니다. line-throu…
  • 문단을 다단으로 만드는 방법 - columns
    일반적으로 신문을 보면 텍스트 단(column)이 여러 개로 나누어져 있습니다. 웹 문서에서도 이렇게 다단으로 편집할 수 있습니다. column과 관련된 여러 속성으로 쉽게 다단을 편집할 수 있습니다. 목차 columns-width columns-count …
  • 이미지에 마우스 올렸을 때 확대하는 방법
    이미지에 마우스 올렸을 때 확대하는 방법 이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. <h1>Hover Effect</h1> <div class="a"> <img alt="" src…
  • 문단 정렬하는 방법 - text-align
    text-align text-align 속성은 문단의 텍스으 정렬 방식을 정합니다. 속성 값으로 워드나 한글 문서에서 흔히 사용하던 '왼쪽 정렬', '오른쪽 정렬', '양쪽 정렬', '가운데 정렬' 등을 지정할 수 있습니다.   기본형 text-align : left | right | …
  • 들여쓰기, 내어쓰기 하는 방법 - text-indent
    text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다.   기본형 text-indent : value value : 크기를 지정합니다. 음수 값도 사용할 수 있습니다. &…
  • 글자에 그림자 효과를 주는 방법 - text-shadow
    텍스트에 그림자 효과를 줄 수 있습니다. 그림자 효과는 본문에서 자주 사용하면 지저분해 보이지만 사이트 제목이나 강조해야 할 글자에 사용하면 글자를 눈에 띄게 할 수 있습니다.   text-shadow text-shadow는 글자에 그림자 효과를 주어 텍스트를 좀 더 입체적으로 보이게…

Post a Comment