프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

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

2018.04.11

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







--------------------------------------------------------------------------------








웹요소의 위치를 옮기거나 크기를 조절하고 회전, 변형시키는 것을 transform 이라고 합니다.
예전에는 포토샵을 사용했어야 했는데 CSS3로 넘어오면서 포토샵의 기능과 비슷하게 웹요소를 순수 CSS 기술만으로 변형할 수 있게 되었습니다.
CSS transform 에는 2D(평면)와 3D(입체)로 나뉘는데 이번 시간에는 2D transform 속성에 대해서 알아보도록 하겠습니다.







1. transform 속성 알아보기

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














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

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














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


Markup














CSS

– 3개의 이미지에 각기 다른 scale()값을 적용하고 마우스를 호버하면 자연스럽게 크기가 변형되게 transition을 적용했습니다.
트랜지션(transition) 에 대해서 더 알고싶으면 “CSS3 트랜지션(transition)” 을 클릭해주세요.
태그 선택자 nth-child(n) 에 대해서 더 알고싶으면 “CSS3 :nth-child(n) 선택자” 를 클릭해주세요.

[출처] CSS3 2D Transform 속성 알아보기 – scale, rotate, skew, translate|작성자 html5around

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3515
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3522
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2172
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20768
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 325
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 352
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 616
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 688
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 627
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669