필굿스토리

Use the CSS Transform scale Property to Change the Size of an Element

 

To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page:

 

p { transform: scale(2); }

 


 

Increase the size of the element with the id of ball2 to 1.5 times its original size.

 

 

 

 

<style>
  .ball {
    width: 40px;
    height: 40px;
    margin: 50 auto;
    position: fixed;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    border-radius: 50%;
  }
  #ball1 {
    left: 20%;
  }
  #ball2 {
    left: 65%;
    transform: scale(1.5);

  }


</style>

<div class="ball" id= "ball1"></div>
<div class="ball" id= "ball2"></div>
TAG :

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 계속 테크니컬한 내용을 올리셔서 댓들 달기가 어렵네요. ^^
    2021.10.19 10:27 신고
    • 밀린 숙제 하는 기분으로 꾸역꾸역 정리하는 중이네요 ㅎㅎ 관심 가져주셔서 감사합니다
      2021.10.20 16:40 신고