<!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>
<style>
/* transform : 회전, 크기 조절, 기울이기,
이동효과 등 요소를 변형
=> translate : 요소의 위치를 이동
=> scale : 요소의 크기를 확대/축소
=> rotate : 요소를 회전
=> skew : 요소를 기울임
*/
.box {
width: 100px;
height: 100px;
background-color: coral;
/* transform: translate(30px, 20px); */
/* transform: scale(1.5); */
/* transform: rotateZ(45deg); */
transform: skew(5deg, 15deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</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>
<style>
.imgWrap{
width: 600px;
height: 800px;
/* 이미지가 영역 밖으로 튀어나오지 않도록 설정 */
overflow: hidden;
}
.imgSec {
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOyb1pgcyk2kK58HYv9OCyuc-Lp1EEQBmzrQ&usqp=CAU);
width: 600px;
height: 800px;
background-size: cover;
background-position: center;
transition-duration: 1s;
}
.imgSec:hover {
transform: scale(1.3);
}
</style>
</head>
<body>
<div class="imgWrap">
<div class="imgSec"></div>
</div>
</body>
</html>
'Web > HTML_CSS' 카테고리의 다른 글
| [CSS] transition (0) | 2023.03.30 |
|---|---|
| [CSS] 애니메이션 (0) | 2023.03.30 |
| [CSS] 포토카드 (0) | 2023.03.30 |
| [CSS] flex (0) | 2023.03.29 |
| [CSS] float (0) | 2023.03.28 |
댓글