※TRANSFORM 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
TANSITION 속성은 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 해 주는 것으로 두 가지를 잘 활용한다면 다양한 애니메이션 적 효과를 줄 수 있습니다.
목차
1. TRANSFORM (변형)
※TRANSFORM 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
크게 2차원 변형과 3차원 변형으로 2가지의 형태를 가집니다.
- 2차원 변형 : 웹 요소를 단순히 수평이나 수직으로 이동하고 회전하는 것
- 3차원 변형 : x축과 y축에 원근감을 주는 z 축을 추가해 변형시키는 것
@2D 변형의 속성
| rotate() | 요소를 회전, 단위는 deg |
| scale(x,y) | 요소의 너비와 높이를 같이 변경, 단위는 등배단위 |
| scaleX() | 요소의 너비만 변경, 단위는 등배단위 |
| scaleY() | 요소의 높이만 변경, 단위는 등배단위 |
| skew(x,y) | X축과 Y축에 따라 기울기 변환, 단위는 deg |
| skewX() | X축을 기준으로 기울기 변환, 단위는 deg |
| skewY() | Y축을 기준으로 기울기 변환, 단위는 deg |
| translate(x,y) | 요소의 이동을 x축, y축으로 이동, 단위는 px |
| translateX() | 요소를 x축으로 이동, 단위는 px |
| translateY() | 요소를 y축으로 이동, 단위는 px |
| matrix(n,n,n,n,n,n) | 6개의 매개변수를 한번에 처리 matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) |
@코드로 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
}
.box:hover {
transform: scale(1.5,1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
위와 같이 적용하면 box에 마우스가 닿으면 x, y축이 각 1.5배씩 증가하게 됩니다.
@3D 변형의 속성
| rotate3d(x, y, z, angle) | 3D회전을 한번에 정의 |
| rotateX() | X축을 중심으로 3D회전을 정의 |
| rotateY() | Y축을 중심으로 3D회전을 정의 |
| rotateZ() | Z축을 중심으로 3D회전을 정의 |
| scale3d(x, y, z) | 3D스케일(크기) 변화를 한번에 정의 |
| scaleX() | X축을 중심으로 3D크기를 정의 |
| scaleY() | Y축을 중심으로 3D크기를 정의 |
| scaleZ() | Z축을 중심으로 3D크기를 정의 |
| translate3d(x, y, z) | 3D적 요소 이동을 한번에 정의 |
| translateX() | X축을 중심으로 3D이동을 정의 |
| translateY() | Y축을 중심으로 3D이동을 정의 |
| translateZ() | Z축을 중심으로 3D이동을 정의 |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
16개값으로 구성되어 4X4행렬로 모든 3Dtransform값을 정의 |
| perspective(n) | 3D 변형 요소의 투시도를 지정 |
2. TRANSITION(변화)
※CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다.
| linear | 등속 변화, cubic-bezier(0, 0, 1, 1)과 같다. |
| ease | 느리게 시작했다가 빨라졌다 다시 느려진다. cubic-bezier(0.25, 0.1, 0.25, 1)과 같다. |
| ease-in | 점점 빨라진다. cubic-bezier(0.42, 0, 1, 1)과 같다. |
| ease-out | 점점 느려진다. cubic-bezier(0, 0, 0.58,1)과 같다.. |
| ease-in-out | 처음과 끝이 느리다.. cubic-bezier(0.42, 0, 0.58,1)와 같다. |
| cubic-bezier(N,N,N,N) | 값을 입력하여 가/감속을 조작한다. |
'HTML' 카테고리의 다른 글
| 비주얼스튜디오 코드(Visual Studio Code)의 로그인 폼 만들기 (0) | 2023.02.27 |
|---|---|
| 비주얼스튜디오 코드(Visual Studio Code)의 그리드(Grid) 1 (0) | 2023.02.25 |
| 비주얼스튜디오 코드(Visual Studio Code)의 FONT와 TEXT (0) | 2023.02.23 |
| 비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자) (0) | 2023.02.22 |
| 비주얼스튜디오 코드(Visual Studio Code)의 FORM_INPUT과 BUTTON (0) | 2023.02.21 |