728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
transform 함수
translatr(x, y ) : 가로방향x, 세로방향y 만틈 이동, % 사용가능 > 요소의 크기를 기준으로 이동
translateX, translateY, 등 원하는 방향만 지정할 수 있는 속성도 있음.
translate(100%, 100%) == translateX(100%) translateY(100%) 같다
scale(%) : % 비율만틈 확대/축소. 100%가 원래 크기 기준 0% ~ ?% 까지 조정 가능
rotate(deg) : deg단위로 요소를 회전시킨다. (각도) 시계방향 기준
무슨 사건이 발생했을 때, 위치가 변경되어야 한다거나 가운데 정렬을 해야한다
=> transform: translate(50px, 50px);
그 외 자리를 지정해야 할 경우는 아래 사용
position: relative;
top : 50px;
legt : 50px;
위 두개는 위치 자체 모습은 같은 위치를 나타냄
*/
body > div {
position: absolute; /* 원래의 나의 위치를 기준으로 이동*/
top: 50%;
left: 50%;
width: 6.25rem;
height: 6.25rem;
background-color: darkcyan;
transition-duration: 1.5s;
/*
사실은 스타일의 변경이 있을 떄, 그 스타일의 변경을 1초동안 보여달라
*/
}
body > div:hover{
left: 1px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>728x90
반응형
'코딩일지 > WEB' 카테고리의 다른 글
| transform3 (0) | 2022.12.29 |
|---|---|
| teansform2 (0) | 2022.12.29 |
| 가상선택자3 (0) | 2022.12.29 |
| 가상선택자2 (0) | 2022.12.29 |
| 가상 선택자 (0) | 2022.12.29 |