CSS/개념정리
[속성] transform 속성
xowoony
2022. 9. 10. 21:54
학습일 : 2022. 09. 07
transform 속성
요소의 형태나 위치를 변화시키기 위해 사용한다.
각 함수는 띄우기( )로 구분하여 여러개 사용한다. 절대 transform 속성을 여러개 사용하지 않는다.
함수
- rotate(?deg) : (해당 2D 상의 요소를 고정축 기준으로) 회전한다. (deg : Degree, 도)
- rotateX(?deg) : X축으로 회전한다.
- rotateY(?deg) : Y축으로 회전한다.
- rotateZ(?deg) : Z축으로 회전한다.
- scale([0.0~|0%~]) : 해당 요소를 확대/축소한다. 기본 값은 1(100%)이다.
- translate([X축 이동량 : ?px|?rem|?%|...], [Y축 이동량 : ?px|?rem|?%|...]) : 해당 요소를 X, Y축으로 이동시킨다.
이 때 퍼센트(%)값은 부모와 관계 없이 본 요소의 크기에 대한 백분율이다.
- translateX([?px|?rem|?%|...]) : 해당 요소를 X축으로 이동시킨다.
- translateY([?px|?rem|?%|...]) : 해당 요소를 Y축으로 이동시킨다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>transform 속성</title>
<style>
body {
margin: 0;
}
.box {
top: 50%;
left: 50%;
width: 20rem;
height: 30rem;
background-color: rgb(200, 100, 100);
position: absolute;
transform: translate(-50%, -50%);❤
}
</style>
</head>
<body>
<div class="box"></div>❤
</body>
</html>============실행결과=============
