質問: CSSのtransform:perspectiveを利用して要素に遠近法のような効果を与えるとき、ブラウザの画面幅によって要素が表示されなくなります。 (Firefoxで確認。Chrome/IEでは正常でした。) サンプルコード: ``` .text { position: absolute; left: 50%; -moz-transform: translateX(-50%) perspective(300px) rotateX(45deg); -webkit-transform: translateX(-50%) perspective(300px) rotateX(45deg); -o-transform: translateX(-50%) perspective(300px) rotateX(45deg); -ms-transform: translateX(-50%) perspective(300px) rotateX(45deg); transform: translateX(-50%) perspective(300px) rotateX(45deg); } ``` ``` この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。 ``` サンプルコードをFirefoxで開き、Resultの横幅を縮めていくと表示されなくなります。 ``` .text { transform: perspective(300px) rotateX(45deg); } ``` 何か指定のしかたが間違っているのでしょうか? Firefoxでも表示できるようにする方法はありますか? 追記1: Firefoxのバージョンは34.0.5 (Windows)です。 追記2: サンプルではベンダプレフィックス`-moz-transform`を利用しています。(認識されていませんが)
回答: > > -moz-transform: rotateX(45deg); > > > Firefoxの場合、上記でどうでしょう?