728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>transform</title>
<meta charset="UTF-8">
<style>
/* transform : 요소의 형태나 위치를 변환시키기 위해 사용한다.*/
div {
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background-color: rgb(1, 252, 252);
transform: translate(-50%, -50%) rotate(45deg) scale(50%);
/* transform 함수
- 띄우기로 구분하여 여러 함수 사용 가능
translate(x, y) : x 축으로 a만큼, y축으로 b만큼, a나 b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.
translateX(a) : x축으로 a만큼. a에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.
translateY(b) : y축으로 b만큼. b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.
rotate(x) : a도 만틈 회전함. 반드시 deg단위 사용
scale(a) : a비율 만틈 확대/축소한다. 기본 값 1(100%)
*/
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| for(반복문) (0) | 2022.12.25 |
|---|---|
| transition(CSS속성 변환 시간제어) (0) | 2022.12.24 |
| padding(외부 여백) (0) | 2022.12.24 |
| position (0) | 2022.12.24 |
| opacity(투명도 설정) (0) | 2022.12.24 |