javascript - 带绝对位置的 CSS 缩放

Question

我正在尝试在我的网页上创建一种效果，您可以在其中单击缩略图，然后从缩略图“放大”一个全尺寸 div。我认为使用 CSS/Jquery 应该相当简单:只需将 div 设置为 position:absolute 并设置 top 和 left 以匹配单击的缩略图，将 zoom 属性设置为适当的低值(例如 .25)，然后使用查询动画功能将缩放值设置为 1 并将顶部/左侧值设置为我想要最终图像的位置。这几乎奏效了，但有一个警告:显然 zoom CSS 不仅缩放了 div 的大小(及其内容)，它还缩放了位置。

所以我的问题(相对)简单:如何定位顶部和左侧与缩略图匹配且缩放参数设置为小于 1 的“全尺寸”div？

编辑 1:经过进一步研究，我发现 Firefox 显然根本不支持缩放属性，而且我在其他浏览器中获得的行为太不一致了，所以我转而使用 CSS 转换/过渡。诚然，过渡属性在 IE <10 上不起作用，但很多其他东西也不起作用，所以我可以接受。

Answer 1

这是意想不到的行为。另一种方法是将缩放元素放在另一个具有绝对位置样式的元素中:

$('#content div').animate({
  zoom: 0.2
},2000);

#content {
  position: fixed;
  top: 50px;
  left: 50px;
  border: 1px solid black;
  background: #88e;
  font: 60px verdana;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div>Lorem ipsum</div>
</di>