[css] 이미지 확대 / transform:scale / transition:transform

css를 이용한 간단한 이미지 확대...

 

간단한 div box안에 이미지 소스를 확대 시키려면

 

transform:scale 을 이용하면 된다.

 

transform:scale(1.1);             /*  default */

-webkit-transform:scale(1.1);  /*  크롬 */
-moz-transform:scale(1.1);     /* FireFox */
-o-transform:scale(1.1);        /* Opera */

 

이미지를 1.1배 확대 한다.

 

 

 

 

 

 

 

 

div 속성

 

.shadow{
   width:100px;
   height:100px;
   border:1px solid black;

   overflow:hidden;  /* div 박스 사이즈를 넘어간 값은 숨긴다*/
}

 

이미지 속성

 

 

.shadow img{
   width:100px;
   height:100px;
  }
  
  .shadow img:hover{ /* img 마우스 오버시*/
       cursor:pointer;

       transform:scale(1.1); /* 마우스 오버시 이미지 크기를 1.1 배만큼 확대시킨다. */

       -o-transform:scale(1.1); 
       -moz-transform:scale(1.1);

       -webkit-transform:scale(1.1);

       transition: transform .35s;  
       -o-transition: transform .35s;
       -moz-transition: transform .35s;
       -webkit-transition: transform .35s;
    /* 마우스 오버시 이미지가 즉시 커지지않고 30.5 second 의 시간에 걸쳐 커진다 애니메이션 효과*/
  }

 

 transition: transform .35s;  적용

 

 

 transition: transform;  미적용