transform
- transform(변형)은 html 요소를 여러 형태로 변형할 때 사용하는 속성으로, transition과 함께 사용하면 재미있는 효과를 낼 수 있다.
- transform에 속한 대표적으로 사용하는 속성은 scale, rotate, translate, skew, origin 등이 있다.
scale
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: aqua;
transition: all 0.1s ease-in-out 0s;
}
.box:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>- scale은 요소의 크기를 변환시킬 때 사용하는 속성으로, 중심점(transform-origin)을 따라 커지는 효과를 나타낸다.
- scale(1)에서 1은 100%를 의미하며, 1 이상 또는 이하의 값을 입력해야 변형이 일어난다.
- scale은 2가지 값을 인수로 받을 수 있다. (x축, y축) 하나만 입력하면 x, y축 모두 동일한 수치를 나타내게 된다.
- 의외로 음수값도 들어가게 되어서,
transform: scale(-0.5, 3) 과 같은 수치도 넣을 수 있다.
rotate
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: aqua;
transition: all 0.1s ease-in-out 0s;
}
.box:hover {
transform: rotate(158deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>- rotate는 회전을 시켜주는 것을 의미한다. 괄호 안에 각도를 입렬하면 입력값 만큼 회전하며,
단위는 deg이다. - 360deg는 한바퀴를 돌며, transform: rotate(4turn)과 같이 사용이 가능하다.
translate
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: aqua;
transition: all 0.1s ease-in-out 0s;
}
.box:hover {
transform: translate(20px, 10px);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>- translate(옮기다)는 Object를 x, y축 지점으로 이동을 시켜주는 프로퍼티이다.
- 즉 translate(x, y) 를 의미한다.
- 기준점은 왼쪽 상단이며, x가 증가할수록 Object는 오른쪽으로, y가 증가할수록 y는 아래방향으로 이동한다.
- 음수값을 적용할 시 반대 방향으로 이동한다.
아래와 같이 absolute position을 가운데정렬 시킬 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
.absol {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: tomato;
transform: translate(-50%, -50%);
}
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: aqua;
transition: all 0.1s ease-in-out 0s;
}
.box:hover {
transform: translate(20px, 10px);
}
</style>
</head>
<body>
<div class="absol">나는 절대적이오.</div>
<div class="box">hello world</div>
</body>
</html>
skew
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: aqua;
transition: all 0.1s ease-in-out 0s;
}
.box:hover {
transform: skew(45deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>- skew(왜곡하다)는 Object에 왜곡을 주어 형태를 변형시킨다.
- 값은 rotate와 동일하게 deg 단위를 사용한다.
- 음수값도 넣을 수 있다.
transform-origin
<!DOCTYPE html>
<html>
<head>
<title>transform</title>
<style>
div {
margin: 200px auto;
width: 100px;
height: 100px;
background-color: aqua;
transition: all 0.1s ease-in-out 0s;
transform-origin: left top;
}
.box:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box">hello world</div>
</body>
</html>- transform-origin 속성은 transform되는 Object의 기준점을 변경할 때 사용된다.
- 그래서 움직이는 효과가 아니라, 기준점이 될 Object에 프로퍼티를 선언해주어야 한다.
- transform-origin: x y; 형태로 표기한다.
- left, right, top, bottom, center 값을 이용해 위치를 설정할 수 있으며, 숫자값으로도 표현할 수 있다.
ex) transform-origin: 0 0; - 디폴트값은 가운데(center, center)이다. ex) transform-origin: center center;
'HTML, CSS' 카테고리의 다른 글
| relative 좌표평면과 absolute, z-index (1) | 2023.12.11 |
|---|---|
| Element.scrollHeight, window.innerHeight, window.scrollY (0) | 2023.12.07 |
| [white-space] 태그에 줄바꿈이 맘대로 되지 않을 때 (0) | 2023.07.03 |
| collapse navbar 구현 및 소스코드 (2) | 2023.04.13 |
| [CSS] 선택자 명시도(selection-specificity) 문제 (0) | 2022.11.01 |
