http://www.romancortes.com/ficheros/css-coke.htmlと非常によく似たものを実現したいと思います。
ただし、私のシリンダーはコーラの缶よりもはるかに太くて幅が広く、3D 効果を実現するために使用される CSS をよく調べたところ、目的の効果を実現するために背景位置のオフセットが手動で入力されたようです。
小さい段落タグの背景を (缶の外側に) 大きくオフセットすることで機能しますが、中央に移動するにつれてオフセットは小さくなります。
円柱の本体がはるかに広い (および段落タグが多い) ため、手動で数字をいじるよりも、実行できる「適切な」計算がいくつかあると考えました。
背景オフセットが円柱の端に向かって移動するときに、背景オフセットを適切に計算する方法について考えている人はいますか?
編集: CSS3 3D 変換はカードにないため、コーラの例を複製したい
さて、円柱から平面への投影があります。y 次元は一様なので、x 次元の計算だけに関心があります。
与えられた x に対して、円を囲む背景の x 座標を取得する必要があります。rが半径または円の場合、角度aに対する投影の x 座標はr cos(a)です。また、 a をラジアンで表した場合、背景の座標はraです。これは、(平面内の) x 座標の場合、背景の座標はacos (x/r)であることを意味します。
指定されたxの背景を正しく設定するために必要なデータはオフセットであり、acos(x/r)-xです。
次に、スプレッドシートで、a 列に 0 から r までのすべての x 値を設定します。b 列に、式acos(x/r)-xを入力します。
最後のステップである最適化: 同じ値を持つすべての行が同じスパンを共有できるため、それらすべてに対して 1 つの div を作成します。
私がこれをうまく説明できたことを願っています、それは簡単ではありません:-)