使用-webkit-transform时不需要左边距:scale(…)

前端之家收集整理的这篇文章主要介绍了使用-webkit-transform时不需要左边距:scale(…)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用wkhtmltopdf(使用Webkit渲染引擎)将 HTML文件转换为PDF文档.生成的PDF是A4.换句话说,它们具有固定的尺寸,因此具有有限的宽度.

我的PDF中的表格之一包含图像,这些图像以拼图方式错综复杂地拼接在一起,有时占据很大的空间.

为了在A4 PDF的约束条件下适应所产生的难题,我正在应用CSS属性-webkit-transform:scale(…);

这样巧妙地缩放拼图,并且仍然清晰易读,但由于某种原因,它也将包含谜题的表格向右推.尽管我明确地将其左边距设置为0,但它似乎在拼图的左侧增加了显着的余量.

有趣的是,我的webkit转换规模越小,左边的边距就越大.所以例如,如果我使用scale(0.75),所得的左边距大约是200像素.如果我使用缩放(0.5),则左边距约为400像素.

我已经尝试使用绝对的,固定的和相对定位的左对齐拼图:左:0.我也尝试将其浮动到左边,以及将其粘贴到一个容器中,将text-align设置为left.这些技术都没有工作.

任何这个左边距来自哪里的想法,以及我如何去除它/解决它?

解决方法

经过一番尝试和错误之后,将以下CSS代码添加到了拼图表中:
-webkit-transform-origin-x: 0;

更多关于这个房产的信息:http://css-infos.net/property/-webkit-transform-origin-x

更新:有关跨浏览器支持,请参阅Richar-dW的评论.

猜你在找的CSS相关文章