[CSS] 요소 크기, 회전, 위치 이동, 기울기 변경: transform

CSS3에서 사용 가능하다!

 

transform

transform은 엘리먼트의 크기, 회전, 위치 등을 변경시키는 속성이다.

transform-origin, scale, rotate, translate, skew에 대해 살펴보자!

 

scale(): 확대, 축소

transform: scale(x축 크기, y축 크기)

transform: scaleX(x축 크기)

transform: scaleY(y축 크기)

.box-container {
	display: flex;
}
.box {
	width: 200px;
	height: 200px;
	border: 2px solid black;
	background-color: rgba(255, 255, 0, 0.7);
	/* 부드럽게 움직이는 효과 */
	transition: 1s;
}
.box:hover {
	transform: scale(1.5);
}

scale()

 

rotate(): 회전

transform: rotate(x축 Ndeg, x축 Ndeg)

transform: rotateX(x축 Ndeg)

transform: rotateY(y축 Ndeg)

.box-container {
	display: flex;
}
.box {
	width: 200px;
	height: 200px;
	border: 2px solid black;
	background-color: rgba(255, 255, 0, 0.7);
	/* 부드럽게 움직이는 효과 */
	transition: 1s;
}
.box:hover {
	transform: rotate(30deg);
}

rotate()

 

translate(): 이동

transform: translate(x축 위치, x축 위치)

transform: translateX(x축 위치)

transform: translateY(y축 위치)

.box-container {
	display: flex;
}
.box {
	width: 200px;
	height: 200px;
	border: 2px solid black;
	background-color: rgba(255, 255, 0, 0.7);
	/* 부드럽게 움직이는 효과 */
	transition: 1s;
}
.box:hover {
	transform: translate(20px, 50px);
}

translate()

 

skew(): 기울기

transform: skew(x축 Ndeg, x축 Ndeg)

transform: skewX(x축 Ndeg)

transform: skewY(y축 Ndeg)

.box-container {
	display: flex;
}
.box {
	width: 200px;
	height: 200px;
	border: 2px solid black;
	background-color: rgba(255, 255, 0, 0.7);
	/* 부드럽게 움직이는 효과 */
	transition: 1s;
}
.box:hover {
	transform: skew(-20deg);
}

skew()

 

transform-origin: 기준점 변경

transform-origin: x축 y축

%나 길이로 입력해도 되고,

x축에는 left, center, right. y축에는 top, center, bottom으로 입력해도 된다.

(default: 중심을 기준으로 동작 - 50% 50%)

.box-container {
	display: flex;
}
.box {
	width: 200px;
	height: 200px;
	border: 2px solid black;
	background-color: rgba(255, 255, 0, 0.7);
	/* 부드럽게 움직이는 효과 */
	transition: 1s;
}
.box:hover {
    transform: scale(0.5);
    transform-origin: left top;
}

transform-origin (중앙이 아닌 left top을 기준으로 scale이 변한다)

 

 

html 소스

<h1>CSS animation</h1>
<div class="box-container">
	<div class="box">Box</div>
</div>