transform-origin은 회전 중심을 지정하는 속성이다. hover나 animation 등 움직이는 모션을 줘야할 때 또는 content 눕히기 등 필요한 속성이다!! 나는 content를 눕혀 나열하기 위해 transform-origin 사용하였다!
1. transform-origin : CSS transform 속성과 함께 사용되는 속성으로서, 회전 중심(원점 기준점)을 지정한다.
- 초기값은 50% 50%이다.
| 백분율(%) | 키워드 |
| 0% 0% | top left |
| 0% 50% | left / left center |
| 50% 0% | top / top center |
| 0% 100% | bottom left |
| 50% 100% | bottom / bottom center |
| 100% 50% | right / right center |
| 100% 100% | bottom right |
2. 실습 (hover시, 본 내용과 같음!)
<기본 코드>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box {
transform: rotate(45deg);
/* transform-origin은 내용에 따라 달라짐! */
/* transform-origin: 100% 100%; */
background: coral;
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 12rem;
transition: .5s;
}
.box:hover {
cursor: pointer;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
① 0% 0% (top left)
② 0% 50% (left / left center)
③ 50% 0% (top / top center)
④ 0% 100% (bottom left)
⑤ 50% 100% (bottom / bottom center)
⑥ 100% 50% (right / right center)
⑦ 100% 100% (bottom right)
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_81] flex에 대해 알아보자 (0) | 2021.05.24 |
|---|---|
| [코딩 공부_79] hanbom-project 클론코딩 완성 (0) | 2021.05.22 |
| [코딩 공부_76] css 스크롤바 스타일 변경하기 (0) | 2021.05.14 |
| [코딩 공부_75] 한화 솔루션/케미칼 클론코딩(완성) (0) | 2021.05.13 |
| [코딩 공부_74] 한화 솔루션/케미칼 클론코딩(미완성) (0) | 2021.05.11 |
댓글