2012-03-26 10 views
9

私はmockupを作成して私の問題を実証しました。私は最初の例で行ったことに解決策が落ちることを恐れている(box1)。CSSトランスフォームを使用し、子要素に影響を与えない方法はありますか

私はCSSは親要素に変換し、それを上書きし、少なくとも子要素に適用する回避または適用することはできません理由だけでわかりません。

transformプロパティを使用して最初の例の効果を得る方法があるかどうかを教えてください。私は第2の画像も同様に拡大縮小したくない。親のdivだけ。


私は、GPUアクセラレーションを有効にするには、このプロパティを使用しようとしています。

+0

あなたは画像がアニメーションのdiv上記固定寸法で滞在したい.box1で自動に設定されたオーバーフロー、.box2 – GnrlBzik

+0

? –

+0

http://jsfiddle.net/gnrlbzik/5Q8EC/あなたが達成しようとしている効果があるかどうか教えてください。 – GnrlBzik

答えて

0

私はGPUのパフォーマンスの特典を得るために-transform使用していました。私は、幅アニメーション:http://jsfiddle.net/Vyaf3/22/を使用し続けますが、GPUアクセラレーションを可能にするcss3プロパティを適用しています。

2

クロム以外のブラウザでこれを再生したことがありません。

親要素のオーバーフロー隠しセットは、イメージの継承のサイズ変更を意味します。アニメーションが適用されたボックスにオーバーフロー自動を設定している場合

だから、それはサイズ変更の継承を修正する必要があります。

http://jsfiddle.net/gnrlbzik/5Q8EC/はタクトの画像寸法を維持autoに設定オーバーフローをテストします。

+0

スクロールバーが表示されないので、実際に別のdivを追加しました:http://jsfiddle.net/5Q8EC/8/あなたが私に与えたリードに感謝します。しかし、オーバーフローが継承にどのように影響するか興味深い。 – mikevoermans

+0

問題ありません、喜んで助けてください。答えを受け入れてくれてありがとう。 – GnrlBzik

+0

ええ私は別のラッパーも考えていましたが、それらの厄介なスクロールバーを恐れています。) – GnrlBzik

1

私はあなたはそれがコンテナではなく、それをリサイズだスケーリング/変換されている子要素を変換するから、それを停止することができるはずはないと思うセマンティックことができます。変換は、ボックス1の例のように幅をアニメートするだけではなく、xを拡大/縮小します。

この質問は、GPUを使用してアニメーションを処理する機能を使用してパフォーマンスを向上させることに関するものだと思います。これは、GPUがアニメートするイメージとして要素を効果的に扱うことによって可能と思われます。したがって、アニメーション中にそのサイズや形状を動的に保持する要素を内部に持つことはできません。おそらく、静的に保つことを望む範囲内で要素を変形することによってアニメーションに対抗する方法があるかもしれませんが、これはおそらく効率的で効果的ではありません。

注::これらの変換をレンダリングするためにWebkitが使用する実際の技術に精通していません。レンダリングの細かいディテールがあまり正確でない場合は申し訳ありません。誰かが変換の仕組みをよりよく説明したとしたら、これを更新します。

+0

あなたは正確です - 私はこれを使用してGPUの性能を評価しています。だから多分私はそれを使用してそれをトリックします。 – mikevoermans

+0

ええ、スケールは、それが想定していることを行い、スケールの親とそれは子供です。 – GnrlBzik