调整元素大小的CSS转换

我发现：

还有其他一些，但没有什么不是我想要的。我想要的是将某些内容缩放到其大小的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>

即使它工作，上面仍然需要我在运行此代码之前首先将元素移动到页面底部（以消除空白），而且我还需要在重新调整大小时重新计算转换。。。因此，无论如何，我对这一尝试并不太满意

另外请注意，如果您使用上面的

scale+trans

与

trans+scale

相比，结果会有很大的不同

---

编辑3:我解决了安置问题。。。变换按指定的顺序应用，

scale（0.5,0.5）

基本上将像素的大小更改为原来的一半（可能暗示了它们是如何在内部实现的）。如果我把translate放在第一位，那么稍微少/多翻译以解释缩放引起的左上角位置的变化就可以了，但是当dom以合理的方式发生变化时，管理对象的位置和调整变换仍然是我无法做到的。这种感觉是错误的，因为我正朝着用javascript编写自己的布局管理器的方向发展，只是为了获得这种效果。

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

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

HTML:

JS:

---

我终于找到了一个简单的解决方案，它与我开始时的解决方案非常相似。

我承认，在过去一年左右的时间里，我们花了很多努力才最终解决了这个问题。我其实是在寻找这个问题的答案。我以前在这方面遇到过问题。不管怎样，我又开始解决这个问题，我确实找到了一个简单的解决办法

无论如何，诀窍是将边距底部与CSS calc脚本一起使用

此外，必须为对象（div）声明绝对高度。如果div可以扩展，我认为这将不起作用，否则，经过多次尝试和数小时，我终于有了一个非常简单、干净、有效的解决方案

例如，高度=300px（不是30%，或者没有高度）。如果可以的话，我甚至会设置overflow-y=hidden。如果您希望div增长（而不是绝对高度），我相信您将需要JavaScript。我没有试过。否则，这将在所有测试中正常工作

我相信这将很好地与SASS或更少，因为您可以使用CSS中的变量声明一些重复的事情。我还没有试过

关于我的解决方案的一些重要评论：

注意，我使用对象的高度和CSS计算方法以及变换大小来计算底部边距

我对我的作品进行了颜色编码，以帮助展示正在发生的事情

wrap div确实有填充，只是为了显示它正在工作。它们是绝对的，不会影响内部对象

如果你像我一样构建一个响应页面，你可以使用媒体查询和类来获得同样的效果

我正在使用变换原点：50%0；这段代码最终没有我最初认为的那么重要。我正在使用底部边距来解决我遇到的问题

在本例中，我只是将div放在父div的中心。如果需要放置div，它会稍微复杂一些，但类似的解决方案也可以。我没有尝试

您可以在jQuery与CSS中使用相同的解决方案。想法是一样的。您可以在页面中搜索带有转换的所有元素，并根据需要添加CSS

我还设置了一个代码笔来测试这一点，并用于共享

.box wrap{
显示：块；
位置：相对位置；
框大小：边框框；
宽度：100%；
保证金：自动；
文本对齐：居中；
利润率：30px 10px；
填充：40px；
背景：黄色；
}
.包装盒：之前{
内容：“；
显示：块；
框大小：边框框；
位置：绝对位置；
背景：rgba（0,0,0,0.5）；
宽度：计算（100%-80px）；
高度：计算（100%-80px）；
顶部：40px；
左：40px；
}
.盒子{
显示：内联块；
框大小：边框框；
位置：相对位置；
变换原点：50%0；
宽度：300px；
高度：150像素；
背景：红色；
}
.box.size-80{
变换：比例（0.8）；
保证金：0自动计算（-150px*（1-0.8））；
}
.box.size-70{
变换：比例（0.7）；
保证金：0自动计算（-150px*（1-0.7））；
}
.box.size-60{
变换：比例（0.6）；
保证金：0自动计算（-150px*（1-0.6））；
}
.box.size-50{
变换：比例（0.5）；
保证金：0 a
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 ; 
}

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

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

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