320x100
# 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="./main.css">
</head>
<body>
<!-- 전환 - 요소의 전 상태와 후 상태의 중간단계를 자연스럽게 만들어주는 것 -->
<!-- 변환 - 요소를 회전시키거나 크기를 키우거나 기울이는 등의 변화 -->
<div class="container">
<div class="item">Apple</div>
<div class="item">Banana</div>
<div class="item">Cherry</div>
</div>
</body>
</html># css 영역
.container .item {
width: 100px;
height: 100px;
background-color: royalblue;
margin: 30px;
padding: 10px;
/* 테두리를 둥글게 해주는 기능 */
border-radius: 10px;
/* 전환 효과 */
/* 1초 */
transition: 1s;
}
/* 마우스 오버 했을때 기능 활성화 hover */
.container .item:nth-child(1):hover {
width: 200px;
background-color: purple;
}
.container .item:nth-child(2) {
/* 변환 효과 */
/* rotate - 45도 */
/* scale 1.2배수 (크기) */
transform: rotate(45deg) scale(1.2);
}
.container .item:nth-child(3) {
/* 보통은 2차원의 변화를 주는 것이나, 이것은 3차원의 변화를 주는 것 */
/* 그냥 3차원의 효과를 주게 되면 어차피 평면이기 때문에 티가 안난다. 때문에 perspective로 원근감을 준다. */
transform: perspective(300px) rotateX(45deg);
}300x250
'Web > Css' 카테고리의 다른 글
| css 문제풀이2 - div과 span을 구분하여 css적용 (0) | 2022.09.28 |
|---|---|
| css 문제풀이1 - h1영역에 색상, 백그라운드 색상 입히기 (0) | 2022.09.28 |
| css 활용5 플렉스(정렬) (0) | 2022.09.06 |
| css 활용4 배치 (0) | 2022.09.06 |
| css 활용3 배경 (0) | 2022.09.05 |