2369


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

サンプルコード:

[code]

    .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);
    }
[/code]

[code]

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

サンプルコードをFirefoxで開き、Resultの横幅を縮めていくと表示されなくなります。

[code]

    .text {
      transform: perspective(300px) rotateX(45deg);
    }
    
[/code]

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

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

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


CC BY-SA 4.0
2014-12-22T04:40:48.337
2364
2019-12-13T14:03:34.317
2019-12-13T14:03:34.317
32986
2244
question
css firefox
CSSの遠近効果付き3D回転をするとFirefoxで表示されなくなる


> -moz-transform: rotateX(45deg);

Firefoxの場合、上記でどうでしょう？


CC BY-SA 3.0
2014-12-22T04:48:26.177
2365
2014-12-22T04:48:26.177
4956
2364
answer

[code]

    transform-style: preserve-3d;
    
[/code]

レイアウトは指定前と比べて 1px もズレないのでこれで良いかもしれない。`flat` 指定だと消えます。(On FF24.8, FF33.1,
FF34.05 - Win7)

消える直前モニタに突き刺さったような状態になってて面白い。なんででしょうね。


CC BY-SA 3.0
2014-12-22T05:53:17.560
2369
2014-12-22T06:02:09.857
2014-12-22T06:02:09.857
4978
4978
2364
answer