[ CSS변환 / Transfrom 1-2 ]

2. 박스에 커서를 대면 커지게 만들기 

 

🟣 스타일 삽입 코드 

 

scale ( 크기 ) (2) > 2배 

<style>
      .box-container {
          display: flex;
      }
      .box {
          width: 100px;
          height: 100px;
          border:2px solid black;
          background: rgba(255, 255, 0, 0.7);

            }
            .box:hover {
                 transform: scale(2);
                 
            }
  </style>

                 

            }

🟣 결과

 

> 블럭에 마우스 커서를 놓을때마다 2배 씩 박스가 커진다 

 

CSS Transform

Lorem ipsum doctypelor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A

B

C

D

E

Lorem ipsum doctypelor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit es se cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.