CSSのperspectiveの値が変わると、CSSアニメーションを適切に反映していないような挙動をする

Question

概要

cssを使って立体的なアニメーションを再現しようと考え、perspectiveというスタイルを試していた際に気になった点です。

色々と試していた時に、perspective値が小さいときにY軸90°回転させても
明らかに90°も回っていないように見えることが分かりました。

また、perspectiveによって、z>0が大きくz<0が小さくなることは存じ上げておりますが
具体的にはどの程度ゆがむのでしょうか？
どの程度の値にすればよいのか、その参考にさせていただければと存じます。

整理すると質問内容は下記の2点になります。

1. Y軸90°回転させた時、90°程回転しているように見えない理由と対策
2. perspective値の変化によって、どのような仕組みでゆがむ度合いが計算されるのか

試してみたこと

下記が私が実際に試してみたコードです。
(pugとscssで書かれていますが、肝の部分はCSSさえご存じであれば問題ないと存じます)

perspective値による違い検証 @CodePen

[仕様]

1. 4つの要素にそれぞれのperspective値を設定し、Y軸回転させることでその歪み度合いを確認する
2. それぞれには、persepctive値として「0px, 10000px, 1000px, 500px」を設定する
3. 元の図形からの変形(回転)度合いを確認するため、元の位置に黒枠を配置する

[挙動Gif]

これを見ると、やはり設定値の90°程回転してはいないように見えます…
特にperspective値が小さい一番下は顕著ですね。

推測

回転角度が小さい理由は調べても出てまいりませんでした…

ゆがむ度合いの理屈としては、自分なりに下記のような仕組みではないかとイメージしました。
ただ、これだと

• 回転角度が小さい理由が説明つかない
• 高さにも歪みが出るモデルになってしまっている

という2点で誤ってると思われます。

※描画イメージが上下反転してしまっていますね…申し訳ございません！

perspective値が小さいほど、オブジェクトとライトのようなもの(妄想)の距離が近く
その分z>0とz<0の違いが大きく評価される。
反対にperspective値が大きいほど、z>0とz<0の違いが微小に評価される。
というモデルです。

説明の仕方はどのような形でも問題ございませんが(いただけるだけでとてもありがたいです！)
計算式ではなく、このようなシンプルなモデルだと非常に助かります…

以上、どうぞよろしくお願いいたします！

Answer 1

こんにちは。

斜めから見ているからだと思います。
以下のようにして、正面に視点を移動してはいかがでしょうか。

.space--1,
.space--2,
.space--3 {
	perspective-origin: 50px;
}

---

初期値 50% 50%
...
パーセント値 囲みボックスの寸法に対する相対値

perspective-origin - CSS: カスケーディングスタイルシート | MDN

Comments

[oztoto]

Lhankor_Mhyさん

ご回答くださりありがとうございました！

なるほど、perspective-originという設定値があるのですね！！
これの初期値が50%であり、今回適用されていた箇所が本体のオブジェクト(幅100px)ではなくその外枠(ウィンドゥ幅いっぱい)だったために
横から見る形になってしまっていた、ということですか。

ご丁寧にありがとうございました！！