css 3D轮播图transform-origin不能适配的原因以及解决办法

因为同时设置了transformtransform-origin css 属性 并将transform-origin设置为: 50% 50% -179px; -179px导致了元素在ios16.0版本及以下 会被放大。

解决办法1:

不用 transform-origin属性 代替使用 transform:translateZ(91px)的方式实现,这种方式画立方体还好,但是画多面体会变得很复杂 可以用chatGPT尝试一下。

解决办法2:

放大多少就缩小多少 比如设置了 -179px 根据我的项目经验需要 缩小scale为: 1 - 0.179 = 0.821

你可能感兴趣的:(前端笔记,css,3d,前端)