javascript - 我可以在 css 中翻译视口(viewport)吗？

Question

我想平移存在于二维平面中的框。每个盒子都有坐标转换，x 和 y。有时这些框在我的视野之外:

假设我有一个盒子目前不在我的视野范围内:

<div class='box'></div>

.box {
    width:150px;
    height:150px;
    background:red;
    position:absolute;    
    transform:translate(-5000px,0px); 
 }

我不想改变方框的坐标。我想更改视口(viewport)的坐标以便可以看到此框。这可能吗？请注意，我希望能够将视口(viewport)设置为新坐标的动画。

Answer 1

你是这个意思吗？

只需平移视口(viewport)...

document.querySelector('button').addEventListener('click', function(){
   document.querySelector('#viewport-content').style.transform = 'translate(-200px, -200px)'; 
});

#viewport
{
    height: 200px; 
    width: 200px;
    background-color: lightblue;
    overflow: hidden;
}

#viewport-content
{
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
}

#box
{
    height: 20px;
    width: 20px;
    background-color: lightyellow;
    position: absolute;
    top: 100px;
    left: 100px;
    transform: translate(200px, 200px);
}

<div id="viewport">
    <div id="viewport-content">
        <div id="box"></div>
    </div>
</div>
<button>Let Me View My Box</button>