和其他几个，但没有什么不是我想要的。我想要的是缩放到它的大小的50％(当然有很好的动画过渡)，并使页面布局重新调整到元素的新(视觉)大小。默认情况下发生的事情是，元素仍然在布局结构中保留其原始大小，并且仅使用关联的转换绘制。

基本上，我想让用户点击一块文本(或其他内容)，然后将该文本缩放到50％(或任何)它的大小，并将其粘贴在下面的面板，以指示它已被选中。我不想在移动它之后的元素周围50％的空白。

我试过重新设置高度/宽度，但是这导致元素iself经历一个新的布局，然后比例应用到新的布局，这仍然留给我50％的空白，完成后。我的mozilla特定(为了简单)代码看起来像这样：

<script type="text/javascript">
 function zap(e) {

  var height = e.parentNode.offsetHeight/2 + 'px';
  var width = e.parentNode.offsetWidth/2 + 'px';
  e.parentNode.style.MozTransform='scale(0.0)'; 
  e.parentNode.addEventListener(
    'transitionend',function() { 
      var selectionsArea = document.getElementById("selected");
      selectionsArea.appendChild(e.parentNode);
      e.parentNode.style.MozTransform='scale(0.5,0.5)'; 
      e.parentNode.style.display = 'inline-block';
      e.parentNode.style.height = height;
      e.parentNode.style.width = width;
    },true) 
}
</script>

我真的希望我不必去搞乱负利润或相对定位来实现这一点…

编辑：自写这篇文章后，我发现了一个非常相似的问题，既没有评论或答案。它略有不同，因为我不在乎它是一个html5特定的解决方案，我怀疑解决方案不存在或位于CSS / javascript，无论html级别。

Scale/zoom a DOM element and the space it occupies using CSS3 transform scale()

编辑2：(另一个非工作尝试)

我也试过这个，但是规模和翻译功能似乎以一种方式使得最终位置不可能预测…和变换之前的缩放看起来不像变换然后缩放。不幸的是，它不只是一个问题，调整翻译的比例因子…

function posX(e) {
    return e.offsetLeft + (e.offsetParent ? posX(e.offsetParent) : 0)
}

function posY(e) {
    return e.offsetTop + (e.offsetParent ? posY(e.offsetParent) : 0)
}

function placeThumbNail(e,container,x,y,scale) {
    var contX = posX(container);
    var contY = posY(container);
    var eX = posX(e);
    var eY = posY(e);
    var eW = e.offsetWidth;
    var eH = e.offsetHeight;

    var margin = 10;
    var dx = ((contX - eX) + margin + (x * eW * scale));
    var dy = ((contY - eY) + margin + (y * eH * scale));

    // assumes identical objects     
    var trans = 'translate(' + dx + 'px,' + dy + 'px) ';
    var scale = 'scale(' + scale + ',' + scale + ') ';
    e.style.MozTransform =  trans + scale ; 
}

即使它工作，上面仍然需要我先运行该元素到页面的底部，然后运行此代码(以摆脱空白)，此外，我需要重新计算变换的大小。 。所以我不是太高兴这个尝试，无论如何开始。

还要注意，如果你使用scale trans vs trans scale，结果是非常不同的。

编辑3：我想出了放置问题…转换是按照指定的顺序应用的，而scale(0.5,0.5)本质上将一个像素的大小更改为原来的一半(可能暗示它们如何在内部实现)。如果我把translate放在第一位，翻译略少/更多来解释由缩放引起的左上角位置的变化会做的伎俩，但管理对象的位置和调整变换时，dom在一个合理的方式仍然没有我。这种感觉错了，因为我在写我自己的布局管理器在JavaScript中的方向漂移，只是为了获得这种效果。