CSS3 ( ) を使用して 3D カルーセルを作成しようとしていますtransform。
しかし問題がある。
以下の写真を見てください。
最初の画像は私の現在のコードの結果です（内部からカルーセルを見るのが好きで、バグもあります :P ）が、2番目の画像のようなものを取得したいです。(外から見るとカルーセルのように見え、バグはありません!)
これは私のコードです。
この目的のために度数に負の値を使用できます。しかし、そうすると、 left と rightdivの高さが center よりも大きくなりますdiv。このように。
2番目の画像のようなものを取得するにはどうすればよいですか? どの CSS 変換コードを使用すればよいですか?
視点の角度を逆にするだけです。必要な a1 と必要なrotateY(-20)c1 の場合rotateY(20):
http://jsfiddle.net/thundercracker/upEC6/4/
編集：
あなたのコメントを見て; div の端が実質的にあなたに近いため、div の高さは大きくなります。div をまったく同じ高さに見せたい場合は、最初の高さを数ピクセル減らすか、中央の div の高さを増やして「ズーム」する必要があります。回転した div の端が「ズームイン」するように'。回転角度を逆にすると高低差が少ないので気になりません。
編集：
さらに、div の遠端は近端よりわずかに小さくなっています。divが十分に長い場合、一方の端が画面の高さになり、もう一方が小さな点になります。
ここにあなたが望むものの動作デモがあります
編集:負の変換 を適用するときの高さの問題を修正するために、 rotate を適用するには、 z 軸に沿って -ve 平行移動を与え、X 軸に沿って -ve と +ve 平行移動を左右の要素にそれぞれ与える必要があります。
編集: css3 変換の使用を説明するチュートリアルがたくさんあります。私はそれらの 1 つを指しています