[CSS] transform - scale, rotate, skew, tranlate

transform

• 주변 요소에 영향을 끼치지 않으면서 원하는 요소의 모습을 변경하는 속성

---

scale

• 요소의 배율을 지정하는 함수
• 두 개의 요소를 지정해서 x, y를 다르게 설정 가능

transform : scale(n)
transform : scale(x, y)

rotate

• 요소의 회전을 지정하는 함수
• 속성 단위 : deg, tum
• 1 tum = 360도, 0.5 tum = 180도

transform : rotate(45deg)
transform : rotate(1tum)

translate

• 요소의 위치를 지정하는 함수
• 속성 단위 : top, left, bottom, right, 숫자 단위 (px, % 등)
• %는 부모가 아닌 해당 요소의 너비와 높이를 기준으로 함

transform : translate(1px, 24px)
transform : translate(50%, 50%)

• 일반적으로 요소를 정가운데에 배치할 때 아래와 같은 방식으로 자주 사용됨

	<style>
		.container {
			position: relative;
			width: 100px;
			height: 100px;
			border: 1px solid red;
		}

		.item {
			background-color: #ddd;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 50px;
			height: 50px;
		}
	</style>


	<div class="container">
		<div class="item">item</div>
	</div>

skew

• 요소의 기울임을 지정하는 함수
• skewX(), skewY()로 각각 가로 세로 기울기를 지정 가능
• 음수로 각도 지정 가능

transform:skew(10deg, 10deg)

tranform:skew(-10deg, -10deg)