css transform scale 질문드려요
본문
특정영역에 scale을 줬을때 변형 후의 크기가 요소의 원래 크기에 적용되게 가능할까요?zoom을 사용하면 되긴하는데 파이어폭스에서 지원이 안되는 속성이라 scale을 써야합니다. javascript를 써서 하기에는 조금 부담스럽고, css에서 뭔가 방법이 있을까요?
<p>11111</p>
<div style="width:100px;height:50px;transform:scale(2);"></div>
<p>22222</p>
답변 1
CSS의 transform 속성을 사용할 때는 해당 요소의 크기가 변환에 영향을 받습니다
다음과 같이 해보시는건 어떨까 합니다
<style>
.scaled-element {
width: 100px;
height: 50px;
transform: scale(2);
transform-origin: top left; /* 기준점 설정 (예: 좌상단) */
}
</style>
<p>11111</p>
<div class="scaled-element"></div>
<p>22222</p>
div가 아래 p를 덮어버립니다.
transform: scale(2); transform-origin: top left; 대신 zoom:2;를 넣었을때와 같은 효과를 낼 수 있는지에 대한 질문입니다.
답변을 작성하시기 전에 로그인 해주세요.