div变换后垂直定位内容答案

【问题标题】：vertically positioning content after div transformdiv变换后垂直定位内容
【发布时间】：2013-12-26 03:05:56
【问题描述】：

我在一个 div 中有内容，我试图根据用户的偏好进行缩放。我正在使用Louis Remi's transform.js 来执行此操作。

但是，当我这样做时，它要么：

将内容推到 div 顶部上方（按比例截断内容）
将内容推到容器下方太远（在横向扩展时留下大量空白）

我尝试在 DOM 上调用这个 sn-p 准备就绪

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

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

这是jsfiddle example。现在它的比例为 0.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; }

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

【问题讨论】：

所以你想scale(.50) 而不让内容贴在顶部？
@Fresheyeball 我更新了这个问题，详细说明了我想要实现的目标。我确实希望内容保持在顶部。

标签： javascript jquery css transform scale

【解决方案1】：

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

CSS

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

【讨论】：

谢谢泰勒！感谢您的帮助。
哦，我没有意识到其他人评论了！我保证，当我开始时它没有得到答复 :) 谢谢你 +1 Bryan！

【解决方案2】：

我相信你要找的是transform-origin

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

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

【讨论】：

CSS3 转换是我的果酱哟。