我想实现与http://www.romancortes.com/ficheros/css-coke.html
非常相似的东西然而，我的圆筒比焦炭更胖更宽，我通过用于实现3D效果的CSS看得很清楚，并且似乎手动输入背景位置偏移以达到预期的效果
它的工作原理是将较小段落标签的背景（以罐子的外侧）偏移较大的量，但偏移量随着向中间移动而变小。
由于我的圆柱体具有更宽的体（以及更多的段落标记），我认为可以进行一些“正确的”计算，而不是手动播放数字。
有没有人对如何在向圆柱边缘移动时正确计算背景偏移有任何想法？
编辑： CSS3 3D转换不在牌上，因此希望复制可乐示例
答案 0 :(得分：1)
嗯，你有从气缸到飞机的投影。由于y维是均匀的，我们只关心计算x维。
对于给定的x，您需要得到背景的x坐标，它围绕着一个圆圈。如果 r 是半径或圆，则对于角度 a ，投影的x坐标为 r cos（a）。如果a以弧度表示，则背景的坐标为 r a 。这意味着对于x坐标（在平面中），背景的坐标为 acos（x / r）。
您需要正确设置给定 x 的背景的基准是偏移量，因此 acos（x / r）-x 。
现在，在电子表格中，将a列中的所有x值从0设置为r。在b列中，输入公式 acos（x / r）-x 。
现在，最后一步，优化：具有相同值的所有行可以共享相同的范围，因此为所有这些行创建一个div。
希望我已经成功解释了这一点，这并不容易： - ）