Transitionsなどが-ms-なしで使えるようになりました。素晴らしい!というわけでさっそく試してみたわけですが、どうもおかしい。表示はできるんですが、アニメーションやトランジションしたときに立体的に見えない。調べてみるとMSDNに次のような記述が。preserve-3dをサポートしていないから子要素それぞれにしてくださいね、ということらしいです。10はflat固定になるわけです。分かりやすいと思われる例を。4つのパネルがくるくる回るだけのサンプルを作ってみました。上がtransform-styleにpreserve-3dを指定したもの、下がflatを指定したものになります。10では下のようになってしまうわけですね。これをどうやって各ブラウザに対応させるかを考えてみました。Transformsに対応していませんが、標準構文を書いておけば大丈夫だと思います)ここからは上記サンプルの.stage1を変更しながら説明します。10に合わせるtransform-styleにはflatしかないんだ、という考えで作ります。.panelの親をアニメーションさせるのではなく、自身をアニメーションさせる指定を行います。*/安全ではありますが......複雑なアニメーションや変形を行っている場合はかなり大変かもしれません。10と別に指定できるようにしてみます。10には上記の指定をし、それ以外は今までどおりという指定ができます。9以下と同じように扱う、ということもできますね。preserve-3dに対応しているかどうかを調べればいいので、Modernizrを使って判定してみました。val);});こんな感じでしょうか。.stage1のようにセレクタを分けて書いていきます。このコードはGistに置いてあるのでよかったら改良してください。}のように上書きします。ちなみにOperaも12.10から使えます。Webkitは近いうちに対応するようなので、それも考えると最終的には以下のような感じでしょうか。*/}何回も同じようなの書いてしまうことになりますが......。いうかもっといい書き方ができるんじゃないかと思います。0を使えば振り分けられますが......やるとしても@supportsと併用したほうが安全な気がします。10だけを振り分けるメディアクエリを使うやり方ですが、こういうのは好きじゃないのでできれば避けたいです。11で予期しない動作をする可能性がないわけではないですし。使うとしても応急処置的なものですね。10に合わせておくのが無難かと思われます。10と同じ指定をしておくのが現実的かなーと思います。@supportsで頑張るか。10で@supports使えたら楽だったんですけどね......。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。