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

RELATION 로고

홈페이지 소스

[CSS] div 모양 변경, CSS 2D 변환

2018.07.18
translate(), rotate(), scale(), skewX(), skewY(), matrix()

** translate () 메서드
이 translate()메서드는 요소를 현재 위치에서 X 축 및 Y 축에 지정된 매개 변수에 따라 이동합니다.
다음 예제에서는 <div> 요소를 오른쪽으로 50 픽셀 이동하고 현재 위치에서 100 픽셀 아래로 이동합니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_translate


** rotate () 메서드
이 rotate()메소드는 주어진 정도에 따라 요소를 시계 방향 또는 시계 반대 방향으로 회전합니다.
다음 예제에서는 <div> 요소를 시계 방향으로 20도 회전합니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_rotate

음수 값을 사용하면 요소가 시계 반대 방향으로 회전합니다.
다음 예제에서는 <div> 요소를 20도 반 시계 방향으로 회전시킵니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_rotate2


** scale () 메서드
이 scale()메서드는 요소의 크기를 늘리거나 줄입니다 (너비 및 높이에 지정된 매개 변수에 따라 다름).
다음 예제에서는 <div> 요소를 원래 너비의 두 배, 원래 높이의 세 배로 늘립니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_scale

다음 예제에서는 <div> 요소의 원래 너비와 높이의 절반을 줄입니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_scale2


** skewX () 메서드
이 skewX()메서드는 X 축을 따라 지정된 각도로 요소를 기울입니다.
다음 예제에서는 X 축을 따라 20도 <div> 요소를 기울입니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skewx


** skewY () 메서드
이 skewY()메서드는 주어진 각도만큼 Y 축을 따라 요소를 기울입니다.
다음 예제에서는 <div> 요소를 Y 축을 따라 20도 기울입니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skewy


** skew () 메서드
이 skew()메서드는 X 및 Y 축을 따라 지정된 각도만큼 요소를 기울입니다.
다음 예제에서는 <div> 요소를 X 축을 따라 20도 기울이고 Y 축을 따라 10도 기울입니다.
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skew


** matrix () 메서드
이 matrix()방법은 모든 2D 변환 방법을 하나로 결합합니다.
matrix () 메서드는 수학 함수가 포함 된 6 개의 매개 변수를 사용하여 요소를 회전, 크기 조절, 이동 (병합) 및 기울이기를 허용합니다.
매개 변수는 다음과 같습니다. matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())
- https://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_matrix1

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3512
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3512
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2169
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20765
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 57
225 [소스] Window.scroll() 꿘쓰 2020.06.22 60
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 171
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 324
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 588
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 579
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 685
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 624
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 666