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
を利用しています。(認識されていませんが)
.text
のボックスの大きさが 12158x16242 なんですが、消えた時は 125669x173089 になってますね…left:50%
を指定すると自動的にwidth:50%
扱いになるように見えますね。 leftを無くせばwidthが広がる→テクスチャのサイズが小さくなる→表示される、ということでしょうか。やはりサイズなのか...