css - 親divのcss3スケール変換ですが、関連するdivの一部で一定のサイズを維持します

Question

css3 スケール変換を使用して、内部に他の div を含む div をスケーリングしています。

私が抱えている問題は、基本的にはスケーリングされていないかのように、保持する必要がある内部 div の一部を保持する必要があることです。サイズは変更しないでください。

一部の div でスケーリングを逆にするにはどうすればよいですか?
逆スケーリングを適用しようとしています。
全体的な div が 1.5 の値を適用した場合、他の div をスケーリングして以前の外観に視覚的に戻す必要がある値を見つけようとしています。

Answer 1

親 div が の倍率でスケーリングされている場合、サイズを一定に保つために1.5、子を の倍率でスケーリングする必要があります。1/1.5 = 0.(6)

例

一般に、子要素に対して、親に適用され、倍率が のスケール変換をキャンセルするには、子自体aに倍率の別のスケール変換を適用する必要があります。1/a

次のいずれかが必要です。

• 他の操作を行う前に倍率を手動で計算し、コードでそのまま使用します (上記のリンクの例)。
• プリプロセッサを使用してこれを処理します（SASSの例）
• JavaScript を使用して、子に必要な倍率を計算し、子に倍率を設定しますtransform。

Answer 2

スケール操作の逆は1 / <scale>、コンテナをスケーリングする1.5ことで、子をスケーリングする必要があることです。1 / 1.5 = 0.6

残念ながら、仕様によれば、次のような CSS だけを使用することはできません。

transform: scale(1/1.5);

スケールは次のように定義されているため、scale(<number>[, <number>])

どこ<number>ですか

1 つまたはゼロ以上の 10 進数の後にドット (.) と 1 つ以上の 10 進数の数字が続く

そのため、自分で計算を行うか、これらの操作をサポートするLESSのような動的スタイルシート言語を使用する必要があります。

デモ(Webkit のみ)