CSS：transform-origin

Question

我在CSS中有轉換問題。

#test{ 
    height:100px; 
    width: 100px; 
    background-color: red; 
    margin-left: 100px; 
    margin-top: 100px; 
} 

#test:hover{ 
    transform : scale(2); 
    transition:1s ease-in-out; 
    transform-origin : left top; 
} 

問題是，當你的鼠標懸停在div它是浮動略有上升，和我想要做的就是堅持一個地方，長出/重新調整僅右側和底部側。

Here is codepen link。

我希望你們明白我想說什麼。

Answer 1

你應該設置過渡動畫的屬性，在你的情況下它應該被添加到transition: 1s ease-in-out;，就像這個transition: transform 1s ease-in-out;那樣是transform。

#test{ 
 
    height:100px; 
 
    width: 100px; 
 
    background-color: red; 
 
    margin-left: 100px; 
 
    margin-top: 100px; 
 
} 
 

 
#test:hover{ 
 
    transform : scale(2); 
 
    transition: transform 1s ease-in-out; 
 
    transform-origin : left top; 
 
}

<div id="test"> 
 
    TEST 
 
</div>

Answer 2

div{ 
    width:100px;height:100px; 
    border:1px solid red; 



    transition-property: transform; 
transition-duration: 200ms; 
transition-timing-function: ease-in; 
transition-delay: 50ms; 
transform: scale(0, 0); 
transform-origin: center left; 


} 
button:hover + div{ 
    transform: scale(1, 1) 
} 

<button>hello</button> 

<div>status</div>