변환 : 이미지를 위에서 아래로 배율

Question

CSS에서 변환을 사용하여 이미지를 위에서 아래로 배율을 조정할 수 있습니까? 여기에이 인스턴스가 있습니다 : http://jsfiddle.net/865vgz82/13/

현재 thumbsskin 클래스의 이미지는 중앙에서부터 확장되고 상단, 하단 및 측면으로 확장됩니다. 상단에 고정시키고 측면 만 축소 할 수 있습니다. CSS로만 가능합니까?

.thumbsskin img { 
height: 135px; 
width: 320px; 
top: 0; 
-webkit-transition: all 0.6s ease-in-out; 
transition:   all 0.6s ease-in-out;} 

.thumbsskin:hover img { 
opacity: 0; 
-webkit-transform: scale(1.9); 
transform:   scale(1.9); 
transform-origin: top;} 

감사합니다.

Answer 1

기본적으로 요소는 중심점을 원점으로 변환합니다. 따라서이 경우 중앙에서부터 확장됩니다. 당신이했던 것처럼 transform-origin을 설정하여 이것을 바꿀 수 있습니다.

간단한 예 :

div { 
 
    margin: 3em auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.9); 
 
} 
 

 
.d2 { 
 
    transform-origin: top; 
 
}

<div></div> 
 
<hr /> 
 
<div class="d2"></div>