如何制作CSS变换：缩放比缩放更像

Question

我的网站有一个“弹出式”面板，可让您选择一个html模板。它们在此阶段显示较小，以提高用户体验。

这是我的选择器。

    .panel-overlay .panel-inner .section-preview
    {
        display: block;
        width: 100%;
        margin-bottom: 50px;
        border: 1px solid black;
        cursor: pointer;
        zoom: 0.2;
    }

使用弃用的“缩放：0.2;”属性看起来完全正确

但是我无法使用它，因为在iPad上根本不会缩放模板，IOS不支持该属性，所以我接受了建议使用“转换：缩放（0.9），它看起来很糟糕在所有设备上。

我似乎无法找到一种让它看起来更像Zoom属性的方法，你知道我怎么做吗？

Answer 1

您是否仅将转换应用于父元素？

改变父母和子女..

https://jsfiddle.net/Hastig/bz6eLwr3/1/

<强> VS

只转换父

https://jsfiddle.net/Hastig/bz6eLwr3/3/

小提琴所需的html代码

.zoom {
  transform: scale(0.5);
}