使用元素调整大小的CSS变换 [英] CSS Transform with element resizing

问题描述

我发现：转换后的宽度/高度

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

and several others, but nothing is not quite what I'm looking for. What I want is to scale something to 50% of it's size (with nice animated transition of course) and have the page layout re-adjust to the new (visual) size of the element. What seems to happen by default is that the element still retains it's original size in the layout structure, and is merely drawn with the associated transformations.

基本上，我希望用户点击一个文本块（或其他内容），然后将该文本缩放为50％（或其他任何大小）它在下面的面板中指示它已被选中。我不想在移动它之后的元素周围50％的空白。

Basically I want the user to click on a block of text (or other content), and then scale that text to 50% (or whatever) of it's size and stick it in a panel below to indicate that it's been selected. I don't want 50% whitespace around the element after I move it.

我已经尝试重新设置高度/宽度，但是这导致元素iself经历一个新的布局，然后比例适用于新的布局和这个仍然留给我50％的空白，毕竟是完成。我的mozilla特定（为简单起见）代码如下所示：

I've tried re-setting the height/width, but that causes the element iself to undergo a new layout and then the scale is applied to the new layout and this still leaves me with 50% white space after all is finished. My mozilla specific (for simplicity) code looks like this:

<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>

我真的希望我不必搞乱负边距或相对定位实现这个...

I'm really hoping I don't have to go into messing with negative margins or relative positioning to achieve this...

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

Since writing this I found a very similar question with neither comments or answers. It differs slightly as I don't care about it being an html5 specific solution, I suspect the solution either doesn't exist or lies in CSS/javascript regardless of the html level.

缩放/缩放DOM元素及其占用的空间使用CSS3 transform scale（）

编辑2：尝试）

我也尝试过了，但是scale和translate函数似乎以最终位置不可能预测的方式进行交互...和scale之前的变换看起来不像变换那么缩放。不幸的是，它不仅仅是按比例因子调整翻译的问题...

I've also tried this, but the scale and the translate functions seem to interact in a manner that makes the final position impossible to predict... and scale before transform doesn't appear to be the same as transform then scale. Unfortunately it's not just a matter of adjusting the translate by the scale factor ...

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 ; 
}

即使它工作，上面仍然需要我先移动元素到页面的底部，然后运行这个代码（以摆脱空白），此外，我需要重新计算转换重新大小...所以我不太高兴与这个尝试开始反正。

Even if it worked, the above would still require me to first move the element to the bottom of the page before running this code (to get rid of the whitespace), and furthermore I would need to recalculate the transform on re-size... so I wasn't too happy with this attempt to start with anyway.

另请注意，如果您使用 scale + trans vs trans + scale 上面的结果是非常不同的。

Also note that if you use scale + trans vs trans + scale above the result is drastically different.

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

Edit 3: I figured out the placement issues... the transforms are applied in the order specified, and scale(0.5,0.5) essentially changes the size of a pixel to half what it was originally (probably hinting at how they implemented it internally). If I put translate is first, translating slightly less/more to account for the change in the position of the upper left corner caused by scale will do the trick, but managing the location of the objects and adjusting the transforms when the dom changes in a reasonable manner is still eluding me. This sort of feels wrong because I am drifting in the direction of writing my own layout manager in javascript just to get this effect.

推荐答案

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

The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn't change its actual pixel size in DOM. Because of that I don't think that CSS-only solution exist.

我将可扩展元素放在容器中，保持与其余的元素相同的像素比率。使用Java Script我只是更改容器的大小。一切仍然基于CSS3 transform：scale。也许JS代码可能更简单，但现在它的所有关于这个想法（只是一个概念的证明）;）解释两个例子： http：/ /jsfiddle.net/qA5Tb/9/

I put scalable element into container which keeps the same pixel ratio as rest of elements. Using Java Script I simply change container's size. Everything is still based on CSS3 transform: scale. Maybe JS code could be simplier, but now it's all about the idea (just a proof of concept);) Fiddle with two examples: 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');
}​

这篇关于使用元素调整大小的CSS变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！