div变换后垂直定位内容

Question

我在div中有内容，我想根据用户的偏好进行扩展。我正在使用Louis Remi's transform.js来执行此操作。

然而，当我这样做时，它要么：

• 将内容推到div的顶部（按比例缩小内容）

• 将内容推向容器太远（在缩小时留下大量空白区域）

我试图在DOM就绪上调用此代码段

$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });

但这仅适用于特定的高度。我想知道无论如何我都可以将内容推到div的顶部，即使我的容器更改了高度。

这是jsfiddle example。现在它处于.50比例，显示内容位于屏幕中间，在div的顶部和底部留下了大量空间。

这是我想要实现的detailed picture。

HTML

<div id="reportContainer">
    <div id="zoomMe">
        <div id="content1" class="fillerBox">&nbsp;</div>
        <div id="content2" class="fillerBox">&nbsp;</div>
        <div id="content3" class="fillerBox">&nbsp;</div>
        <div id="content4" class="fillerBox">&nbsp;</div>
        <div id="content5" class="fillerBox">&nbsp;</div>
    </div>
</div>

CSS

#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }

JS

$(document).ready(function() {
    $("#reportContainer").height($(window).height()-50);
    $("#zoomMe").css('transform', 'scale(.50)' );
});

Answer 1

我相信你要找的是transform-origin

http://css-tricks.com/almanac/properties/t/transform-origin/

这将使您能够在元素上设置将在转换​​发生时保持不变的点。通过将transform-origin设置为顶部中心：您可以缩放元素并将其相对于顶部的位置保持在同一位置。

Answer 2

这对我有用！我不太了解这个transform.js插件，但你要看的属性是“transform-origin”。你的问题是它正在从中心缩放#zoomMe，使你的变换后内容从顶部和底部偏移25％。

<强> CSS

#zoomMe {
 transform-origin:center top;
 -webkit-transform-origin:center top;
}