求缩放平移后元素定位公式：3D轮播容器适配问题
2026-8-13
3D轮播容器适配padding的通用计算公式问题
我从零开始构建一款“3D轮播”，通过CSS Grid设置grid-area: 1/1将3个slide堆叠在一起：slide1居中，slide2、3分别左右平移实现基础3D效果。为了让轮播容器完美适配内容，我通过左右padding抵消slide2、3的溢出。无缩放时，padding等于平移偏移量即可，但给slide2、3应用scale()缩放后，找不到适配width（slide宽度）、offset（平移偏移量）、scaling（缩放比例）的通用padding计算公式，只能手动适配。
以下是手动测试的适配数据：
| width(px) | offset(px) | scaling | padding(px) |
|---|---|---|---|
| 150 | 50 | 0.50 | 12 |
| 300 | 100 | 0.50 | 25 |
| 200 | 100 | 0.50 | 50 |
| 150 | 100 | 0.50 | 62 |
| 350 | 150 | 0.50 | 62 |
| 250 | 100 | 0.75 | 68 |
| 300 | 175 | 0.50 | 100 |
| 300 | 200 | 0.50 | 125 |
| 300 | 200 | 0.75 | 162 |
内容的提问来源于stack exchange，提问作者RebootGG
相关产品推荐
相关产品推荐
