如何使用CSS变换比例将对象居中

问题描述 投票:0回答:1

我正在尝试实现放大/缩小功能,就像在google docs或任何文字处理器应用程序之类的文档编辑器上一样。我遇到的问题是我无法使“文档”居中,也无法将其所有部分滚动到视图中。这是该问题的一个小例子:https://codepen.io/liviu_vasut/pen/dyGbwwO

HTML

<div class="container">
      <div id="objectToScale" class="object">x</div>
</div>

CSS

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px;
      width: 300px;
      height: 200px;
      border: 1px solid #000000;
      left: 0px;
      top: 0px;
      margin: 10px;
      overflow: auto;
    }

    .object {
      position: relative;
      width: 120px;
      height: 120px;
      display: inline-block;
      background-color: grey;
      border-radius: 25px;
      padding: 5px;
      transform-origin: center;
      transform: scale(1);
    }

JS

    document.getElementById('objectToScale').style.transform = "scale(3)";

感谢您的时间。

css css-transforms
1个回答
0
投票
例如

document.getElementById('objectToScale').addClass('scaledObject');

然后使用CSS来应用样式:

.scaledObject{
    transform: scale(3);
}
© www.soinside.com 2019 - 2024. All rights reserved.