我发现了这个：变换后的宽度/高度
和其他几个，但没有什么不是我想要的。我想要的是将某些东西缩放到其大小的 50%（当然还有漂亮的动画过渡），并让页面布局重新调整到元素的新（视觉）大小。默认情况下似乎发生的情况是元素在布局结构中仍保留其原始大小，并且仅使用相关的转换进行绘制。
基本上，我希望用户单击文本块（或其他内容），然后将该文本缩放到其大小的 50%（或其他）并将其粘贴在下面的面板中以指示它已被选中。移动元素后，我不希望元素周围有 50% 的空白。
我尝试重新设置高度/宽度，但这会导致元素本身经历新的布局，然后将比例应用于新布局，这仍然给我留下了 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 级别如何。
使用 CSS3 转换 scale() 缩放/缩放 DOM 元素及其占用的空间
编辑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 + transvs trans + scale，则结果会大不相同。
编辑 3：我发现了放置问题......转换按指定的顺序应用，并且scale(0.5,0.5)基本上将像素的大小更改为原来的一半（可能暗示他们如何在内部实现它）。如果我把 translate 放在第一位，那么翻译稍微少/多一点来解释由比例引起的左上角位置的变化就可以了，但是当 dom 发生变化时管理对象的位置并调整变换合理的方式仍然让我望而却步。这种感觉是错误的，因为我正朝着用 javascript 编写自己的布局管理器的方向漂移，只是为了获得这种效果。