CSSのdivスケーリングが、HTMLは通常のスケールで

Question

ままにしたい私は、HTMLとCSSを持っている：

<div class="box" style="transform: scale(2);"> 
    <div class="text">This is my text.</div> 
</div> 

は、どのように私は外箱は、アニメーションを経由していたときに、スケーリングからテキストを保つのですか？

Answer 1

。 scaleは、要素全体と内部の子ツリーに作用します。しかし、スケールアップしているように見えるようにすることができます。そのようなこと（この方法は、GPUとブラウザの描画に軽いです）：

<div class="box" style="position: relative"> 
    <div class="box-block" style="position: absolute; transform: scale(2);"></div> 
    <div class="text">This is my text.</div> 
</div> 

だから、アイデアがある：

1. あなたは内側の2つの保持ブロック
を持つコンテナ要素
2. を持っています
3. あなたはボックスのように見え、それを拡大縮小します。
4. テキストdivは別の要素に含まれているため、決してアニメーションに触れません。

構造が改善される可能性があります。 乾杯！

Answer 2

あなたは（あなたのケースで2で割った1が0.5である）、元の規模で割った1によって、内側のdivをスケーリングする必要があります。

<div class="box" style="transform: scale(2);"> 
 
    <div class="text" style="transform: scale(0.5);">This is my text.</div> 
 
</div>

Answer 3

transform: scale(x)はと全体要素をスケーリングそれはすべて子どもです。私はあなたのCSSを見ることはできませんが、この場合には、すべてのテキストがスケーリングされていないことを確認するためにハードコード化されたソリューションを実装する必要があり、それは次のようになります。

.box:hover { 
    transform: scale(2); 
} 

.box:hover > .text { 
    transform: scale(0.5); // change it back to half of the intended size by the .box; 
} 

Answer 4

私はわからないんだけど、これがあれば何をしたいのですか？

.parent { 
    transform: scale(2); 
} 
.child { 
    transform: scale(0.5); 
} 

子供をスケールします。スケールxの場合、すべての子供に目盛り1/xを使用する必要があります。

Answer 5

変換要素のすべてのコンテンツは、不透明度を使用しているとき、あなたはスケーリングコンテナの外にテキストを設定する必要があると同じように、それを用いて形質転換し、オーバーレイ互いを作るためにそれらにいくつかのポジショニングを使用している：

<div class="text">This is my text.</div> 
<div class="box" style="transform: scale(2);"></div> 

代わりに、含まれる要素に反対のスタイルを設定することにより、変換を回避しようとすることができます：あなたができない理論に

<div class="box" style="transform: scale(2);"> 
    <div class="text" style="transform: scale(0.5);">This is my text.</div> 
</div>