7

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

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

.text {
  transform: perspective(300px) rotateX(45deg);
}

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

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

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

5
  • 興味深いです。消える直前は .text のボックスの大きさが 12158x16242 なんですが、消えた時は 125669x173089 になってますね…
    – KoRoN
    Commented 2014年12月22日 4:52
  • 問題解決の助けにはならないでしょうが、Firefoxは裏でテクスチャ作って3Dとして貼ってる予感がしますね。で、テクスチャの上限サイズにが16K(16384)ドットでアウトと… となると Mac や Linux での動作も知りたくなりますね。
    – KoRoN
    Commented 2014年12月22日 5:10
  • Ubuntu の Firefox で試して、同様の症状が再現することを確認できました。
    – KoRoN
    Commented 2014年12月22日 5:13
  • 要素を調査でCSSのtransformをみると、見えなくなったタイミングで図形がひっくり返っていますね。裏側だからレンダリングされていないのかも・・・。なお、leftとtranslateXをなくせば表示はされます(意図する距離感ではないのだと思いますが)。
    – fliedonion
    Commented 2014年12月22日 5:21
  • 知らなかったのですが、left:50%を指定すると自動的にwidth:50%扱いになるように見えますね。 leftを無くせばwidthが広がる→テクスチャのサイズが小さくなる→表示される、ということでしょうか。やはりサイズなのか...
    – tkrkt
    Commented 2014年12月22日 5:36

2 件の回答 2

2
transform-style: preserve-3d;

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

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

1
  • 1
    おお、消えなくなりました!(jsfiddle.net/r1onp8j3/2) ただ、この指定で何で消えなくなるのかが良くわからないですね。 でもきちんと動作します。ありがとうございます。
    – tkrkt
    Commented 2014年12月22日 6:05
1

-moz-transform: rotateX(45deg);

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

1
  • すみません。書き忘れていました。 サンプルソースでは一応-moz-transformを使っています。 ただ、-moz-transformは認識されていないので、もう今のFirefoxではtransformが標準になっているようです。
    – tkrkt
    Commented 2014年12月22日 4:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。