调整元素大小的 CSS 变换

Question

我找到了这个:width/height after transform

和其他几个，但没有什么不是我正在寻找的。我想要的是将某些东西缩放到其大小的 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 级别如何。

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 与 trans + scale，结果将大不相同。

编辑 3: 我弄清楚了放置问题...转换按指定的顺序应用，scale(0.5,0.5) 本质上改变了大小一个像素到原来的一半(可能暗示他们是如何在内部实现的)。如果我把翻译放在第一位，稍微少/多翻译以解释由比例引起的左上角位置的变化就可以了，但是管理对象的位置并在 dom 变化时调整变换合理的方式仍然在躲避我。这种感觉是错误的，因为我正朝着用 javascript 编写自己的布局管理器的方向漂移，只是为了获得这种效果。

Answer 1

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

我将可缩放元素放入容器中，该容器与其余元素保持相同的像素比。使用 Java Script，我只需更改容器的大小。一切仍然基于 CSS3 transform: scale。也许 JS 代码可以更简单，但现在一切都与想法有关(只是概念证明)；)摆弄两个例子:http://jsfiddle.net/qA5Tb/9/

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');
}​