transform / transition
css 속성 transform과 transition을 사용하면 위에 움직이는 도형처럼 html 요소에 동적인 효과들을 줄 수 있습니다.
transform 속성은 요소에 회전, 크기 조정, 이동, 기울임 등의 변형을 주고,
transition 속성은 변형의 제어를 담당합니다(동작 시간, timing-function 등).
참고로 transition으로 제어할 수 없는 속성들은 keyframe과 css animation 속성을 활용해야 합니다. 이 글에서는 transition과 transform만 사용해서 간단한 효과를 추가하는 방법을 살펴보겠습니다.
1. transform
div가 하나 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
background: #55efc4;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
클릭하면 transform 혹은 transition 속성을 가진 go클래스를 더해주도록 설정한 후
밑에서 go 클래스에 다양한 값을 설정해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
background: #55efc4;
cursor: pointer;
}
.go {
/* 속성 추가 */
}
</style>
</head>
<body>
<div class="container" onclick="move()"></div>
<script>
function move() {
document.querySelector(".container").classList.add("go");
}
</script>
</body>
</html>
1-1. 이동: x축으로 100px 이동합니다.
(직접 클릭해 보세요)
.go {
transform: translateX(100px);
}
1-2. 크기 조정: 크기를 0.5배로 줄입니다.
(직접 클릭해 보세요)
.go {
transform: scale(0.5);
}
1-3. 회전: 시계방향으로 45도 회전합니다.
(직접 클릭해 보세요)
.go {
transform: rotate(45deg);
}
2. transition
transform만으로는 요소의 변형만 일으킬 뿐 제대로 된 동적인 효과를 줄 수 없습니다. transition을 사용해서 다양한 동적효과들을 줄 수 있습니다.
transition 관련 프로퍼티
| transition-property | 효과를 적용할 css 프로퍼티를 지정합니다. |
| transition-duration | 효과가 진행되는 시간을 지정합니다. |
| transition-delay | 요청을 받은 후 실제 변형할 때까지의 지연시간을 설정합니다. |
| transition-timing-function | 효과의 진행속도를 조절합니다.(점점 빠르게, 점점 느리게 등) |
4가지 프로퍼티를 아래와 같이 한 번에 적용할 수도 있습니다.
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
2-1. 이동: x축으로 100px 이동합니다 + 요청을 받고 1초 후에 2초 동안 진행합니다.
(직접 클릭해 보세요)
.go {
transform: translateX(100px);
transition-property: all;
transition-duration: 2s;
transition-delay: 1s;
}
2-2. 크기 조정: 크기를 0.5배로 줄입니다 + 5초 동안 5단계로 나눠서 진행합니다.
(직접 클릭해 보세요)
.go {
transform: scale(0.5);
transition-duration: 5s;
transition-timing-function: steps(5, jump-start);
}
2-3. 회전: 시계방향으로 45도 회전합니다 + 5초 동안 진행되며 처음엔 느렸다가 점점 빨라집니다.
(직접 클릭해 보세요)
.go {
transform: rotate(45deg);
transition-duration: 5s;
transition-timing-function: ease-in;
}
* 여러 가지 효과를 동시에 줄 수도 있습니다.
(직접 클릭해 보세요)
.go {
background: #d63031;
border-radius: 80px;
transform: rotate(180deg) scale(0.5);
transition-property: all;
transition-duration: 3s;
}transform - CSS: Cascading Style Sheets | MDN
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
developer.mozilla.org
transition - CSS: Cascading Style Sheets | MDN
transition CSS속성은 transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) 과 transition-delay (en-US)를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄
developer.mozilla.org
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리 (1) | 2023.12.31 |
|---|---|
| [HTML, CSS] 하트 만드는 방법 - before, after (0) | 2023.12.28 |
| [HTML, CSS] flexbox(display: flex) 총정리 (0) | 2023.12.28 |
| [HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) (2) | 2021.04.01 |
| [HTML, CSS] 기본적인 페이지 레이아웃(layout) 잡기 네이버 클론코딩 (2) - flex, grid 레이아웃 (2) | 2020.03.28 |
