CSS3를 처음 접하는 사람들에게 가장 신기한 기능이 무엇인지 물어본다면 아마 대부분 사람들은 transition을 꼽을 것입니다. 이 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 그 효과 또한탁월하기 때문에 이번 절에서는 CSS3의 꽃이라고도 할 수 있는 transtion, 전환 효과에 대해 알아보도록 하겠습니다.
# Contents
- transtion
# transtion
transition의 기본 문법은 아래와 같습니다.
transtion: 속성명 전환시간 가속도 설정 지연시간
transtion의 구문 위치는 변경 후인 hover이 아니라 변경이 일어나기 전인 원래의 태그 선택자입니다.
먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.html 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div>
<p>box1</p>
</div>
</body>
</html>
다음은 style.css 코드입니다.
div {
width: 600px;
height: 400px;
margin: 200px auto;
border: 1px solid red;
position: relative;
perspective: 1600px;
background-color: salmon;
transition: all 1s ease 0s;
}
div:hover {
transform: rotate(150deg);
background-color: blue;
}
모든 css 속성의 변경사항에 대해서 1초의 시간 동안 가속도를 적용하여 지연시간 없이 전환 효과를 구현하라. 라는 풀이를 통해 해당 <div>에 마우스 오버 시 시계 방향으로 45도 회전하면서 부드럽게 배경색이 변경됩니다.
'기초 문법 > HTML&CSS' 카테고리의 다른 글
| [CSS] animation (0) | 2021.11.23 |
|---|---|
| [CSS] 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 (0) | 2021.11.23 |
| [CSS] 특정 요소의 모양을 평면상에서 자유롭게 변형하기 (0) | 2021.11.23 |
| [CSS] 배경에 그라디언트 색상과 모양 지정하기 (0) | 2021.11.23 |
| [CSS] box-sizing (0) | 2021.10.15 |
