我想实现非常相似的东西：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。
现在，最后一步，优化：所有具有相同值的行可以共享相同的跨度，因此为所有行创建一个 div。
希望我已经成功解释了这一点，这并不容易:-)