1. 변형
1) 변형 함수
- CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성하여야 한다.
transform: 함수2차원 변형 : 웹 요소를 평면에서 변형한다.
3차원 변형 : x축과 y축에 원근감을 주는 z축을 추가해서 변형한다.
2) translate( ) 함수 : 요소 이동하기
| 종류 | 설명 |
|---|---|
| translate( ) 함수 | 요소 이동하기 |
| transform: translate(tx, ty) | 지정한 크기만큼 x축과 y축으로 이동한다.. |
| transform: translate(tx, ty, tz) | 지정한 크기만큼 x축, y축, z축으로 이동한다. |
| transform: translate(tx) | 지정한 크기만큼 x축으로 이동한다. |
| transform: translate(ty) | 지정한 크기만큼 y축으로 이동한다. |
| transform: translate(tz) | 지정한 크기만큼 z축으로 이동한다. |
3) scale( ) 함수 : 요소 확대 / 축소하기
| 종류 | 설명 |
|---|---|
| scale( ) 함수 | 요소 확대 / 축소하기 |
| transform: scale(sx, sy) | 지정한 크기만큼 x축, y축으로 확대 / 축소한다. |
| transform: scale(sx, sy, sz) | 지정한 크기만큼 x축, y축, z축으로 확대 / 축소한다. |
| transform: scale(sx) | 지정한 크기만큼 x축으로 확대 / 축소한다. |
| transform: scale(sy) | 지정한 크기만큼 y축으로 확대 / 축소한다. |
| transform: scale(sz) | 지정한 크기만큼 z축으로 확대 / 축소한다. |
4) rotate( ) 함수 : 요소 회전하기
| 종류 | 설명 |
|---|---|
| rotate( ) 함수 | 요소 회전하기 |
| transform: rotate(각도) | 지정한 각도만큼 회전한다. |
| transform: rotateX(각도) | x축을 기준으로 지정한 각도만큼 회전한다. |
| transform: rotateY(각도) | y축을 기준으로 지정한 각도만큼 회전한다. |
| transform: rotateZ(각도) | z축을 기준으로 지정한 각도만큼 회전한다. |
| transform: rotate3d(rx, ry, rz, 각도) | x축과 y축, z축을 기준으로 지정한 각도만큼 회전한다. |
5) skew( ) 함수 : 요소 비틀기
| 종류 | 설명 |
|---|---|
| skew( ) 함수 | 요소 비틀기 |
| transform: skew(ax, ay) | 지정한 각도만큼 x축과 y축으로 비튼다. |
| transform: skewX(ax) | 지정한 각도만큼 x축으로 비튼다. |
| transform: skewY(ay) | 지정한 각도만큼 y축으로 비튼다. |
- 이미지 회전하며 원근감 주기
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.rotatex:hover { transform: rotateX('50deg'); } /* x축으로 50도 회전 */
#pers { perspective: 300px; } /* 원근감 추가 */
</style>
</head>
<body>
<div class="origin">
<div>
<img src="image/dog.jpg" alt="">
</div>
</div>
<div class="origin" id="pers">
<div class="rotatex">
<img src="image.dog.jpg" alt="">
</div>
</div>
</body>2. 트랜지션
1) 트랜지션
-
웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것이다.
-> 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것
2) 트랜지션 속성
| 종류 | 설명 |
|---|---|
| transition-property | 트랜지션의 적용 대상을 지정한다. (기본값 |
| transition-duration | 트랜지션의 실행 시간을 지정한다. (단위: s(초) / 기본값: 0) |
| transition-timing-function | 트랜지션의 실행 형태를 지정한다. |
| transition-delay | 트랜지션의 지연 시간을 지정한다. (단위: s(초) / 기본값: 0) |
| transition | transition-property, transition-duration. transition-timing-function, transition-delay 속성을 한꺼번에 지정한다. |
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
transition: 2s ease-in; /* transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 0; */
}
.box: :hover {
width: 200px;
height: 200px;
background-color: blue;
transform: rotate(270deg);
}
</style>
</head>3. 애니메이션
1) 애니메이션
- 애니메이션 속성은 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다.
키프레임: 애니메이션 중간에 스타일이 바뀌는 지점
-> @keyframes 속성으로 정의하며 animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부를 지정한다.
2) 애니메이션 속성
| 종류 | 설명 |
|---|---|
| @keyframes | 애니메이션이 바뀌는 지점을 설정한다. |
| animation-delay | 애니메이션의 시작 시간을 지정한다. |
| animation-direction | 애니메이션을 종료한 뒤 처음부터 시작할지, 반대 방향으로 진행할지 지정한다. |
| animation-duration | 애니메이션의 실행 시간을 지정한다. (단위: s(초)) |
| animation-iteration-count | 애니메이션의 반복 횟수를 지정한다. |
| animation-name | @keyframes로 설정해 놓은 중간 상태를 지정한다. |
| animation-timing-function | 키프레임의 전환 형태를 지정한다. |
| animation | animation 속성을 한꺼번에 묶어서 지정한다. |
