我正在尝试实现放大/缩小功能,就像在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)";
感谢您的时间。
document.getElementById('objectToScale').addClass('scaledObject');
然后使用CSS来应用样式:
.scaledObject{
transform: scale(3);
}