테스트 사이트 - 개발 중인 베타 버전입니다

css transform scale 질문드려요 채택완료

세크티 1년 전 조회 1,920

특정영역에 scale을 줬을때 변형 후의 크기가 요소의 원래 크기에 적용되게 가능할까요?zoom을 사용하면 되긴하는데 파이어폭스에서 지원이 안되는 속성이라 scale을 써야합니다. javascript를 써서 하기에는 조금 부담스럽고, css에서 뭔가 방법이 있을까요?

</p>

<p><p>11111</p></p>

<p><div style="width:100px;height:50px;transform:scale(2);"></div></p>

<p><p>22222</p></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

CSS의 transform 속성을 사용할 때는 해당 요소의 크기가 변환에 영향을 받습니다

다음과 같이 해보시는건 어떨까 합니다

 

</p>

<p><style>

  .scaled-element {

    width: 100px;

    height: 50px;

    transform: scale(2);

    transform-origin: top left; /* 기준점 설정 (예: 좌상단) */

  }

</style></p>

<p><p>11111</p>

<div class="scaled-element"></div>

<p>22222</p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

세크티
1년 전
div가 아래 p를 덮어버립니다.
transform: scale(2); transform-origin: top left; 대신 zoom:2;를 넣었을때와 같은 효과를 낼 수 있는지에 대한 질문입니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인