무료폰트 웹디자이너 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

이 포스트 공유하기

글수정  글삭제 전체목록