容器的變換比例和子變換的縮放比例

我在CSS中縮放時遇到問題。 div.container有transform: scale(0.1)，所以由於正常的字體大小，h1這個元素有transform: scale(10)。容器的變換比例和子變換的縮放比例

懸停後，div.container有transform: scale(0.5)和h1transform: scale(2)。一切都是動畫（transition: all 1s ease-in-out）。

但是，h1的動畫並不像動畫div.container那麼快，所以在懸停後，h1在動畫開始時非常大，然後快速縮小。

我認爲這是因爲h1應該有反轉寬鬆。但是什麼樣的緩解是對ease-in-out的反轉？還是其他地方的問題？

注：我不能只縮放div.image。這段代碼只是一個例子。我必須縮放div.container。

.container, .title { 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.image { 
 
    background-image: url(https://www.w3schools.com/css/trolltunga.jpg); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    height: 300px; 
 
    width: 800px; 
 
} 
 

 
.container { 
 
    transform: scale(0.1); 
 
} 
 

 
.title { 
 
    margin: 0; 
 
    text-align: center; 
 
    padding-top: 1rem; 
 
    transform: scale(10); 
 
} 
 

 
.container:hover { 
 
    transform: scale(0.5); 
 
} 
 

 
.container:hover .title { 
 
    transform: scale(2); 
 
}

<div class="container"> 
 
    <div class="image"> 
 
    
 
    </div> 
 
    <h1 class="title">Title</h1> 
 
</div>

來源

2017-06-29 Vesmy

我發現它不具有線性寬鬆的工作。所以，問題並沒有在緩解。

.container, .title { 
 
    transition: all 1s linear; 
 
} 
 

 
.image { 
 
    background-image: url(https://www.w3schools.com/css/trolltunga.jpg); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    height: 300px; 
 
    width: 800px; 
 
} 
 

 
.container { 
 
    transform: scale(0.1); 
 
} 
 

 
.title { 
 
    margin: 0; 
 
    text-align: center; 
 
    padding-top: 1rem; 
 
    transform: scale(10); 
 
} 
 

 
.container:hover { 
 
    transform: scale(0.5); 
 
} 
 

 
.container:hover .title { 
 
    transform: scale(2); 
 
}

<div class="container"> 
 
    <div class="image"> 
 
    
 
    </div> 
 
    <h1 class="title">Title</h1> 
 
</div>

來源

2017-06-29 21:34:06 Vesmy

容器的變換比例和子變換的縮放比例

回答

相關問題