同じ高さと可変幅のコンテナにある特定の寸法（たとえば、100x300 px）の要素を持っています。これをコンテナの選択中に使用rotateXして変換したいので、画像の一番下の行がどこにとどまっているように見えますかコンテナ全体を埋めるために拡張するだけです。-webkit-transform-origin: top center;-webkit-perspective
うわー、それは紛らわしいですね。ここに写真があります：
したがって、基本的には、上幅が固定で下幅が可変の台形を作成したいと考えています。しかし、関係の背後にある数学を完全に理解することはできません.Javascriptを歓迎します. 次の例は、本文の幅が 600px の場合に機能します: http://jsfiddle.net/24qrQ/
ここでのタスクは、体の幅に合わせて視点と回転を連続的に変更することです。何か案は？
さて、一杯のワインの後、数学が私に戻ってきました：
まず、パース・回転比率を見てみましょう。横から見るとこんな感じ。
赤い要素は上端を中心に回転します。下端をコンテナーの下端に投影すると、投影線と上端でコンテナーに垂直な線との交点が必要な視点になります。これは単純な三角法によって得られます (ここでの phi は度ではなくラジアンであることに注意してください)。
これを適用すると、要素の下端は常にコンテナの下端に表示されます。これで自由なパラメータは回転です。という関係があるようです
rad = pi/2 - element.width / container.width
幅が十分に大きい場合は、実際の関係に頭を悩ませることはできません。ここにフィドルがあります：http://jsfiddle.net/24qrQ/6/
基本的に、オブジェクトを3D空間に配置する方法を理解しようとしているので、オブジェクトは2Dビューポートと整列します。それは常にトリッキーなことです。
私は数学が何であるかを知りません、そして他のほとんどはおそらくどちらも知りません。これはほとんど一般的な問題ではありません。しかし、これが私がそれを理解する方法です。
ここでの唯一の変数はですwidth。また、幅に基づいて変更する必要がある2つの値は-webkit-perspective、コンテナと-webkit-transform内部要素にあります。そのため、いくつかの異なる幅の値を手動で編集し、正しく表示するために入力する必要のある3D値を記録します。（Webインスペクターを使用して値をリアルタイムで編集し、すぐにフィードバックを得ることができます）
1つは、いくつかのデータポイントがあり、それらをグラフにプロットしてから、それらがどのように変化するかを理解することです。私はそれが放物線であるという予感がありますが、それは双曲線または正弦波でもあるかもしれません、私の3D数学は確かに知るのに十分ではありません。
次に、サンプリングした幅を入力すると、以前に設定した手動の3D値が返される方程式を理解してみてください。次に、JSを使用してコンテナーの幅を読み取り、CSS値を設定して正しく表示されるようにします。
私は3つの幅300、450、600でそれを行いました：
いくつかの傾向は明らかです。幅が大きくなると、遠近感は増加する速度で上昇し、回転は増加する速度で下降します。
正確な式を理解するのはあなた次第です。
より簡単な方法として、数式を理解するのが難しくなった場合は、見栄えのするいくつかの幅と3D値を手動で選択して、JSのどこかに保存することができます。次に、それらの間を線形補間することができます。正確ではありませんが、十分に近い可能性があります。
それも面白くないでしょう！