调整元素大小的CSS转换

Question

和其他几个，但是没有什么不是我想要的。我想要的是将某些内容缩放到其大小的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级别无关。

编辑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)实际上将像素的大小更改为原来大小的一半（可能暗示了它们是如何在内部实现的）。如果我把转换放在第一位，那么稍微少一点/多一点翻译以解决由缩放引起的左上角位置的变化就可以解决问题，但是当dom中的dom变化时，要管理对象的位置并调整变换合理的态度仍使我无法理解。这种感觉是错误的，因为我正朝着用JavaScript编写自己的布局管理器的方向漂移，只是为了获得这种效果。

Answer 1

我注意到的问题是，当元素缩放时，浏览器会更改其像素比例，而不是像素数量。元素较小，但不会更改DOM中的实际像素大小。因此，我认为不存在仅CSS解决方案。

我将可缩放元素放入容器，该容器保持与其余元素相同的像素比率。使用Java脚本，我只需更改容器的大小即可。一切仍然基于CSS3转换：缩放。也许JS代码可能更简单，但是现在所有的想法都在这里（只是概念的证明）；）摆弄两个例子

HTML：

<div class="overall-scalable">
    <div class="scalable" scalex='0.5' scaley='0.5'>
        Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium. Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium.
    </div>
</div>

CSS：

.overall-scalable {width: 350px; height: 150px; overflow: hidden; -webkit-transition: all 1s;}
.scalable {color: #666; width: 350px; height: 150px; -webkit-transform-origin: top left; -webkit-transition: all 1s;}

JS：

$('button').click(function() {
    $('.scalable').each(function(){
        rescale($(this));
    })
});

function rescale(elem) {

    var height = parseInt(elem.css('height'));
    var width = parseInt(elem.css('width'));
    var scalex = parseFloat(elem.attr('scalex'));
    var scaley = parseFloat(elem.attr('scaley'));

    if (!elem.hasClass('rescaled')){
        var ratioX = scalex;
        var ratioY = scaley;
    }else{          
        var ratioX = 1;
        var ratioY = 1;
    }

    elem.toggleClass('rescaled');
    elem.css('-webkit-transform', 'scale('+ratioX +', '+ratioY+')');        
    elem.parent().css('width', parseInt(width*ratioX) + 'px');
    elem.parent().css('height', parseInt(height*ratioY) + 'px');
}​