コンテナを変換するときにフォントサイズのスケーリングを避ける最も良い方法は何ですか？

Question

私はモーダルの入力をアニメーション化するためにCSS transform: scaleを使用しています。問題は、それが含まれている<div>のテキストスケールです。

どうすればよいですか？

scaleを使用したいのは、よりスムーズなアニメーションを得るための方法がsuggestedであるためです。

Answer 1

あなたのコードがなければ、あなたには実用的な答えを与えるのは難しいです。

基本的に、スケールされる親要素から子要素を除外することはできません。あなたは2つの要素を分離することによって、あなたが望むものを達成することができます。

さらに詳しい情報がありますhereです。

Answer 2

は、コンテナとテキストの両方をに変換することです。

コンテナは拡大縮小され、テキストは縮小されているので、同じように見えます。

はここでは非常に基本的な例である：

button:focus + div { 
 
    transform: scale(2); 
 
} 
 

 
button:focus + div p { 
 
    transform: scale(.5); 
 
} 
 

 
div { 
 
    width: 200px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
}

<button>Click to scale box</button> 
 

 
<div> 
 
    <p>Do not scale this text</p> 
 
</div>

Answer 3

@MalloreeEady答え、私はポストからの回答を強化しました。親コンテナと関連するテキストは、通常、変換の影響を受けます。これを回避するには、内部に別のタグを作成するか、疑似要素を使用する必要があります。

h2 { 
 
    color: #ffffff; 
 
} 
 
.box { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 50%; 
 
    padding: 10px; 
 
    text-align: center; 
 
    margin: 50px auto; 
 
} 
 

 
.box::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    display: block; 
 
    background: #000; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
} 
 

 
.box:hover::before { 
 
    -webkit-transform: scale(1.3); 
 
    -ms-transform: scale(1.3); 
 
    transform: scale(1.3); 
 
}

<div class="box"> 
 
    <h2>TEST TEXT</h2> 
 
</div>