728x90 반응형 Transform2 [CSS] transform의 사용 transform transform 속성은 요소를 2D 또는 3D 공간에서 변형하는 데 사용됨.transform 기능은 다음과 같습니다translate(): 요소를 이동시킵니다.rotate(): 요소를 회전시킵니다.scale(): 요소의 크기를 조절합니다.skew(): 요소를 기울입니다.matrix(): 위의 변형을 결합하여 변형합니다.사용 예시 transform: translateY(-50%);transform: translateY(-50%);는 요소를 수직으로 가운데 정렬하는 데 사용됨. 이를 위해 position: absolute; 또는 position: fixed;를 함께 사용하여 기준 위치를 설정한 후,top: 50%;와 함께 사용된다. 요소가 부모 요소의 높이의 50% 지점에 위치한 후,자기 .. 2024. 6. 27. [생활코딩] CSS 수업 정리 (14) 변형 엘리먼트의 크기(조절), 엘리먼트의 회전 또는 비틀기 h1이 화면 전체를 쓸 경우, 트랜스 폼 효과의 결과를 보기 어렵다. display:inline-block; 사용 transform 효과들 1 -> 2 transform:scaleX(2) 두 배 했다는 뜻 Hello Transform! h1 { background-color: aqua; /* 텍스트 사이즈 */ color: white; display: inline-block; padding: 5px; /* 폰트사이즈 3배 */ font-size: 3rem; margin: 100px; transform: scaleX(2); } 0.5 1/2 즉, 반으로 크기를 줄인 것 X 의미 : X축으로 변형 일어난 것 y 축 또한 .. 2023. 7. 23. 이전 1 다음 728x90 반응형