html - CSS3 transform translateZ は何らかの方法でスケールに等しいと思います

Question

場合によっては、ズームインやズームアウトと同じ効果があるtranslateZと思います。scale

それらの間にいくつかの計算接続があると思います。それらの1つの値を知っていればtranslateZ(-1000px)、親の値と同じ効果を持つ値perspectiveを計算できますか?scaletranslateZ

Answer 1

あなたは正しいです。オブジェクトが手前に移動すると (つまりtranslateZ)、大きく見えます (つまりscale)。

この図に示すように、perspectiveはコンテナに対してビューアーがどこにあるかをtranslateZ定義し、コンテナに対してサブジェクトがどこにあるかを定義します。

scale から translateZ への (およびその逆の) 式は次のとおりです。

-また-

数学的証明は数学の達人に任せますが、ピタゴラスの定理でいくつかのチェックを行ったところ、すべてうまくいきました。

例：

コンテナから 100px 離れているとしましょう:#container { perspective: 100px; }

1. あなたの場合translateZ(50px)、被写体はあなたの半分に移動し、2 倍の大きさで表示されます。
2. あなたがの場合translateZ(75px)、被写体はさらに半分近くに移動し、再び 2 倍になり、4 倍になります。
3. これを続けていくとtranslateZ(100px)、 に近づくにつれて被写体が無限大に近づきます。

やってみて。さまざまな例を視覚的に比較するためのJSFiddleを次に示します。

制限:

これは、被写体があなたに向かって直接動いている場合に機能しますが、3D 空間で被写体を回転させるなどの操作を行うとバラバラになります。そのための数学もありますが、複雑になります。ウィキペディアの3D プロジェクションをご覧ください。