divで展開したすべてのものをトランジションで同じ比率で作成するには

-1

divの下に画像と異なるサイズのテキストを含むページがあります。ホバー上では、私はすべてが大きく成長するが、同じ割合を保持したい。どのように私は手動で内部の各要素の完璧なトランジションサイズを見つけることなくこれを行うことができますか？divで展開したすべてのものをトランジションで同じ比率で作成するには

出典

2017-02-12 user7548189

だけのdiv

div:hover{ 
 
    transform:scale(0.8); 
 
    transform-origin: top left; 
 
    transition: transform 200ms; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div> 
 
    
 
    <img src="https://unsplash.it/458/354?image=0" alt="hi" width="300px" > 
 
    <br> 
 
    <h1> hello there </h1> 
 
</div> 
 
</body> 
 
</html>

出典

2017-02-12 16:20:16

しかしCSS3のトランジションにリンクされているスケール変換を持ってする方法はあります変換？私は試みている移行：スケール1s線形; しかし、それは動作しません – user7548189

答えを..あなたが必要とする 'transition：transform 1s'ではなく' scale' –

divで展開したすべてのものをトランジションで同じ比率で作成するには

答えて

関連する問題