css

CSS3 2D Transform 속성 알아보기 – scale, rotate, skew, translate

핑계/ editor

  • 2 comments
  • 12,122 views
  • 2017년 9월 2일

포토샵 말고 css transform 속성 사용해서 이미지를 변형해보아요~

웹요소의 위치를 옮기거나 크기를 조절하고 회전, 변형시키는 것을 transform 이라고 합니다.
예전에는 포토샵을 사용했어야 했는데 CSS3로 넘어오면서 포토샵의 기능과 비슷하게 웹요소를 순수 CSS 기술만으로 변형할 수 있게 되었습니다.

CSS transform 에는 2D(평면)와 3D(입체)로 나뉘는데 이번 시간에는 2D transform 속성에 대해서 알아보도록 하겠습니다.

 

1. transform 속성 알아보기


 

웹요소를 변형하려면 transfrom 속성을 사용해야 하며 기본형식은 아래와 같습니다.
여기에서 ‘변형 함수 값’이란 오늘 알아볼 ‘scale, rotate, skew, translate’ 등을 말합니다.

transform: 변형 함수 값;

 

① transform: scale() – 요소를 X축이나 Y축으로 확대/축소하기

scale은 지정한 크기만큼 x축 또는 y축으로 해당요소를 확대 또는 축소 시킵니다.
scale의 사용법은 아래와 같습니다.

transform: scaleX(x축 비율);          // x축으로 확대/축소

transform: scaleY(y축 비율);          // y축으로 확대/축소

transform: scale(x축 비율, y축 비율); // x축, y축으로 확대/축소

scale은 원본크기를 1로 기준으로 하고, 1보다 크면 확대, 1보다 작으면 축소됩니다.
비율값은 소수점이하로도 설정할 수 있습니다.

 

Markup

<body>
    
</body>

CSS

– 3개의 이미지에 각기 다른 scale()값을 적용하고 마우스를 호버하면 자연스럽게 크기가 변형되게 transition을
    적용했습니다.

트랜지션(transition) 에 대해서 더 알고싶으면 “CSS3 트랜지션(transition)” 을 클릭해주세요.
태그 선택자 nth-child(n) 에 대해서 더 알고싶으면 “CSS3 :nth-child(n) 선택자” 를 클릭해주세요.

ul {
  list-style-type: none;
  width: 640px;          
  margin: 30px auto 0;
}

ul li {
  float: left;
}

ul li + li {
  margin-left: 20px;;
}

ul li a img {
  width: 200px;
  height: auto;
  box-shadow: 5px 5px 15px #999;
  transition: all 0.4s ease-in-out 0.1s;  /* 마우스 호버하면 자연스럽게 변형되게 */
}

ul li:first-child a:hover img {
  transform: scale(1.2);  /* 마우스 호버하면 세로길이만 1.2배 확대 */
}
ul li:nth-child(2) a:hover img {
  transform: scaleX(2);   /* 마우스 호버하면 가로길이만 2배 확대 */
}
ul li:nth-child(3) a:hover img {
  transform: scale(0.5);  /* 마우스 호버하면 전체 0.5배 축소 */
}

HTML5AROUND on html5around.com

 

② transform: rotate() – 요소 회전하기

rotate는 지정한 각도만큼 웹요소를 회전시킵니다.
rotate의 사용법은 아래와 같습니다.

transform: rotateX(ndeg);  // x축을 기준으로 n도 만큼 회전

transform: rotateY(ndeg);  // y축을 기준으로 n도 만큼 회전

transform: rotate(ndeg);   // n도 만큼 회전

회전각도가 플러스값일 때는 시계 방향, 마이너스값일 때는 반시계 방향으로 회전합니다.

CSS

ul li:first-child a:hover img {
  transform: rotateY(180deg);  /* 마우스 호버하면 Y축 기준으로 180도 회전 */
}
ul li:nth-child(2) a:hover img {
  transform: rotateX(180deg);  /* 마우스 호버하면 X축 기준으로 180도 회전 */
}
ul li:nth-child(3) a:hover img {
  transform: rotate(-230deg);  /* 마우스 호버하면 반시계방향으로 230도 회전 */
}

HTML5AROUND on html5around.com

 

③ transform: skew() – 요소를 X축이나 Y축으로 기울이기

skew는 지정한 각도만큼 웹요소를 기울입니다.
skew의 사용법은 아래와 같습니다.

transform: skewX(ndeg);           // x축으로 n도 만큼 기울이기

transform: skewY(ndeg);           // y축으로 n도 만큼 기울이기

transform: skew(x축ndeg, y축ndeg); // x축, y축으로 n도 만큼씩 기울이기

CSS

ul li:first-child a:hover img {
  transform: skewY(40deg);       /* 마우스 호버하면 Y축으로 40도 기울임 */
}
ul li:nth-child(2) a:hover img {
  transform: skewX(-50deg);      /* 마우스 호버하면 X축으로 -50도 기울임 */
}
ul li:nth-child(3) a:hover img {
  transform: skew(40deg, 20deg); /* 마우스 호버하면 X축으로 40도, Y축으로 20도 기울임 */
}

HTML5AROUND on html5around.com

 

④ transform: translate() – 요소를 X축이나 Y축으로 이동

translate는 지정한 각도만큼 웹요소를 기울입니다.
translate의 사용법은 아래와 같습니다.

transform: translateX(x축 이동거리);             // x축으로 이동

transform: translateY(y축 이동거리);             // y축으로 이동

transform: translate(x축 이동거리, y축 이동거리); // x축, y축으로 동시 이동

CSS

ul li:first-child a:hover img {
  transform: translateY(50px);        /* 마우스 호버하면 Y축으로 50px 이동 */
}
ul li:nth-child(2) a:hover img {
  transform: translateX(50px);        /* 마우스 호버하면 X축으로 50px 이동 */
}
ul li:nth-child(3) a:hover img {
  transform: translate(-50px, -50px); /* 마우스 호버하면 X축으로 -50px, Y축으로 -50px 이동 */
}

HTML5AROUND on html5around.com

 

 

2. transform-origin 속성 알아보기


 

지금까지 transform의 속성인 rotate(회전), translate(이동), skew(기울기), scale(확대/축소) 에 대해서 알아보았습니다.

모두 웹요소의 모양을 변형시키는 속성들인데, 공통점이 있습니다.
바로 해당요소의 정중앙을 기준으로 변형이 일어난다는 점입니다.
transform-origin 을 사용하면 변형이 일어나는 기준점을 변경할 수 있습니다.

transform-origin 의 기본형식은 아래와 같습니다.

transform-origin: x축 y축;

– x축 : 길이값(px/em/rem..), 백분율(%), left, center, right 중에서 사용할 수 있습니다.
– y축 : 길이값(px/em/rem..), 백분율(%), top, center, bottom 중에서 사용할 수 있습니다.

 

Markup

<body>
    
</body>

CSS

ul li:first-child a:hover img {
  transform: scale(1.5);
  transform-origin: left top;     /* 왼쪽 위를 기준으로 1.5배 확대 */
}
ul li:nth-child(2) a:hover img {
  transform: rotate(-25deg);
  transform-origin: left bottom;  /* 왼쪽 아래를 기준으로 -25도 회전 */
}

HTML5AROUND on html5around.com

 

 

3. 마치며


 

지금까지 CSS로 웹요소를 옮기거나 크기를 조절하고 회전시키는 등 변형하는 방법에 대해서 알아보았습니다.
포토샵이나 다른 그래픽 편집 프로그램을 이용하지 않아도 CSS만으로 변형이 가능하니 웹 문서가 가볍고 작업이 간편해졌습니다.

CSS말고 자바스크립트로 이미지 변형을 제어하고 싶다면
“자바스크립트로 CSS transform 제어하기 – scale(크기), rotate(회전), skew(비틀기)” 를 클릭해주세요.

수고하셨습니다.

핑계

댓글 먹고 살아요~

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
KImsam Recent comment authors
newest oldest most voted
sam
Guest
sam

감사합니다!

KIm
Guest
KIm

감사합니다