我可以在css中翻译视口吗?

时间:2015-05-04 19:06:11

标签: javascript css3

我想要在2d平面中存在的方框。每个框都有翻译的坐标x和y。有时盒子不在我看来:

说我有一个目前不在我看来的方框:

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

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

我不想改变盒子的坐标。我想更改视口的坐标,以便我可以看到此框。这可能吗?注意我希望能够将视口设置为新坐标。

1 个答案:

答案 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>