Transform
: Transform 속성은 HTML 요소의 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때, 사용한다.
: Transform 속성을 사용하기 위해서는 display 속성이 block 혹은 inline-block 이어야 한다.
ex) transform: translateX(20px);
Transform 함수
- translate(x, y) : 지정한 값 만큼 x축, y축으로 이동한다.
- scale(x, y) : 지정한 값 만큼 x축, y축으로 확대 및 축소 한다.
- rotate( 30deg ) : 지정한 각도만큼 회전한다. (+ 시계방향, - 반시계방향)
- skew(x, y) : 지정한 각도만큼 x축과 y축을 왜곡한다.
Transition
: 속성값이 변할 때 더 부드럽게 전환되도록 도와준다.
Transition 속성
- transition-property: <속성1> , <속성2> ; 와 같이 지정한다.
- all : 모든 속성을 지정한다.
- non : 아무것도 지정하지 않는다.
- transition-duration : 효과를 몇 초 동안 실행할 것인지 결정한다.
- transition-delay : 효과에 지연시간을 결정한다.
- transition-timing-function : 시작과 끝의 속도감을 조정한다.
- linear : 일정하다.
- ease-in : 가속한다.
- ease-out : 감속한다.
Transition 단축 사용
ex) transition: all 2s ease-in; >>> all은 생략해서 사용할 수 있다.
transition: 2s is ease-in; >>> 2s 실행시간, 1s 지연시간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transform</title>
</head>
<style>
body {
margin: 0;
padding: 0;
background-color: lightblue;
}
.outline,
.box {
width: 60px;
height: 60px;
}
.outline {
border: 3px solid yellow;
margin: 0 auto;
margin-top: 20px;
}
.box {
background-color: blue;
}
.box1 {
transform: translate(10px, 10px);
}
.box2 {
transform: scale(2, 0.5);
}
.box3 {
transform: rotateX(45deg);
}
.outline-box3 {
perspective: 50px;
}
.box4 {
transform: skewX(45deg);
}
/* Transition */
.box1 {
transition-property: all;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease-in;
}
.box1:hover {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div class="outline">
<div class="box box1"></div>
</div>
<div class="outline">
<div class="box box2"></div>
</div>
<div class="outline outline-box3">
<div class="box box3"></div>
</div>
<div class="outline">
<div class="box box4"></div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| Responsive Web 반응형 웹 | Viewport | 미디어 쿼리 (0) | 2024.01.25 |
|---|---|
| Animation (0) | 2024.01.25 |
| Pseudo Class & Element (0) | 2024.01.24 |
| Background (0) | 2024.01.24 |
| Float 속성 | Position 속성 (1) | 2024.01.24 |
댓글