요소 자체를 컨트롤하는 속성은 무엇일까?
transform 속성
--
요소의 특정 변형 효과를 지정하는 속성이다.
기본 형식
transform: 함수;
예시 코드
<style>
div{
width:100px;
height:100px;
background-color:red;
}
div:hover {
transform: translate(100px, 200px);
}
</style>
<body>
<div></div>
</body>
확대 or 축소
기울기
회전
--
transform-origin 속성
--
변형의 기준점을 변경하는 속성이다.
요소가 변형될 때 각 변형을 시작하는 기준점이 존재한다.
(ex. 요소가 회전할 때는 요소의 중심을 기준으로 회전)
기본 형식
transform-origin: x축 위치 y축 위치;위치는 %단위 또는 키워드를 사용한다.
--
'Language > CSS' 카테고리의 다른 글
| 플렉스 박스 레이아웃 (1차원 레이아웃 설계하기) (0) | 2025.03.15 |
|---|---|
| 웹 폰트, 아이콘 폰트 사용 (0) | 2025.03.15 |
| [속성] 애니메이션 속성을 통해 전환 효과 제어 (0) | 2025.03.14 |
| [속성] 기존 스타일 속성 값을 다른 속성 값으로 전환하는 속성 (0) | 2025.03.09 |
| [속성] 위치 관련 속성으로 요소 배치하기 (0) | 2025.03.06 |
