Skip to main content
ツイート済み twitter.com/jaStackOverflow/status/1205638729370607616
本文に 1317 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

サンプルコード: http://jsfiddle.net/r1onp8j3/

.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>

サンプルコード: http://jsfiddle.net/r1onp8j3/

サンプルコード:

.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)固有の問題なのでタグを追加しました。
リンク
本文に 63 文字追加
ソース リンク
tkrkt
  • 187
  • 1
  • 8

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

サンプルコード: http://jsfiddle.net/r1onp8j3/

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

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

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

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

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

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

サンプルコード: http://jsfiddle.net/r1onp8j3/

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

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

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

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

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

サンプルコード: http://jsfiddle.net/r1onp8j3/

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

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

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

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

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

本文に 40 文字追加
ソース リンク
tkrkt
  • 187
  • 1
  • 8
読み込んでいます
ソース リンク
tkrkt
  • 187
  • 1
  • 8
読み込んでいます