我想要在2d平面中存在的方框。每个框都有翻译的坐标x和y。有时盒子不在我看来:
说我有一个目前不在我看来的方框:
<div class='box'></div>
.box {
width:150px;
height:150px;
background:red;
position:absolute;
transform:translate(-5000px,0px);
}
我不想改变盒子的坐标。我想更改视口的坐标,以便我可以看到此框。这可能吗?注意我希望能够将视口设置为新坐标。
答案 0 :(得分:1)
Is this what do you mean?
Just translate the 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>