CSSのtransform:perspectiveを利用して要素に遠近法のような効果を与えるとき、ブラウザの画面幅によって要素が表示されなくなります。
(Firefoxで確認。Chrome/IEでは正常でした。)

サンプルコード: 

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

    .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);
    }

<!-- language: lang-html -->

    <div class="text">
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
    </div>

<!-- end snippet -->

サンプルコードをFirefoxで開き、Resultの横幅を縮めていくと表示されなくなります。
    
    .text {
      transform: perspective(300px) rotateX(45deg);
    }

何か指定のしかたが間違っているのでしょうか?
Firefoxでも表示できるようにする方法はありますか?

追記1: Firefoxのバージョンは34.0.5 (Windows)です。

追記2: サンプルではベンダプレフィックス`-moz-transform`を利用しています。(認識されていませんが)