CSS3 のパースペクティブと変換をいじっています。この素晴らしい 3D 立方体の例から始めて、立方体が中心を中心に回転するだけでなく、端をロールオーバーするように立方体を変更したいと思います。
z軸を中心に立方体を回転させることで、最初の左チルトが機能するようになりました-webkit-transform-origin: bottom left（fiddle を参照してください。簡単にするために、例は左チルトに限定されています）。その後の左傾のため、原点をさらに調整する方法に苦労しています。概念的には、親コンテナーを基準にして原点を設定する必要があります (つまり、連続して左に傾ける場合は、200px 単位で徐々に左に移動する必要があります)。
どんな助けでも大歓迎です！
私はこれを試してみましたが、必要なものを正確に取得するには、利用可能なcssマトリックス変換を調べる必要があると思います.
残念ながら、回転してから変換原点を移動するほど単純ではありません。立方体はそのエッジを中心に回転しますが、変換点を移動すると、この新しい起点を使用して以前の変換が立方体に適用されます。
さらに、立方体の位置も変換する必要があります。純粋に回転を使用して移動することはできません。マトリックスはこれらすべてを解決するはずです（私はそれらについてあまり知りませんが、恐れています）
私が作成した修正済みの jsfiddle で、立方体が回転および移動されていることがわかります。ただし、平行移動のポイントは中心なので、立方体が「転がっている」ようには見えません。重要な追加コードは次のとおりです。
... //left zAngle -= 90; xPos -= 50; //rotate and translate the position of the cube $('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)"; ...
js フィドルはこちら: http://jsfiddle.net/DigitalBiscuits/evYYm/20/
これがお役に立てば幸いです！