2016-04-11 6 views
1

誰かにとってはかなり簡単な質問です。私のウェブサイトのCSSでは、私はtranslate3d()を使って素晴らしいアニメーションを作りました。問題は、これらのアニメーションはすべて2次元であることです。適用可能な場合はGPUレンダリングを利用するために、私はちょうどtranslate3d()を利用しています。 transform: translate(50%, 50%);は、GPUブーストせずに、同じ視覚効果を達成するのに対し、css、translate()vs translate3d()support

transform: translate3d(50%, 50%, 0);し、それをアニメーション化:つまり

、私は次のようなものを使用してきました。

私はCanIUseをちょっと見ていましたが、残念なことにInternet Explorerの場合は、translate3d()のサポートに欠けています.2D変換のサポートは、少なくとも私にIE 9へのアクセスを与えます。translate3d()を使用している場合は、私はIE 9にアクセスできます。 IEはその特定のプロパティをサポートしていませんが、XとYの変換のみを使用していて、それでもレンダリングしていることを認識しますか?それとも、すべてを通常の古いものに切り替える方がよいでしょうかtranslate()

私が言ったように、私が嫌う唯一の理由は、複雑なアニメーションではGPUアクセラレーションが持つのがうれしいからです。

IEが自動的にフォールバックしない(私が期待して恐れている)場合は、サポートするブラウザでGPUレンダリングを利用できるように他の技術を提供できますか?

2dと3dの両方の変換をCSSで(その順番に)リストして、IEがtranslate3d()を無視するようにするか、余分なリソースを消費する可能性がありますか?

事前にお問い合わせいただきありがとうございます。

+0

可能な重複使用されます[検出 "変換を:translate3dの支援を] (http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support) – Vucko

+0

返信いただきありがとうございました。私は実際にその投稿を見つけられませんでしたが、重複しているとは思いません。私の主な質問は、3番目の変数にかかわらず、変換が本質的に2次元であったためにIEが後退するかどうかということでした。しかし、その記事はかなり面白く見えるし、私は読んでみる必要があります、ありがとう! –

答えて

2

あなただけの他のブラウザ

-ms-transform: translate(50%, 50%); /* IE9 support*/ 
transform: translate3d(50%, 50%, 0); /* IE10+ and other browser*/ 

IE9のためのIE9とtransformに適用される-ms-transformを使用することができますtransformを無視しての-ms-transform