CSS元素大小调整
我发现这个： 变换后的宽度/高度
和其他几个，但没有什么不是我所期待的。 我想要的是将大小缩放到其大小的50％（当然，animation过渡很好），并且将页面布局重新调整为元素的新（可视）大小。 默认情况下发生的情况是，元素在布局结构中仍然保留原始大小，仅仅通过相关的转换进行绘制。
基本上我希望用户点击一个文本块（或其他内容），然后将该文本缩放为其大小的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的具体解决scheme，我怀疑这个解决scheme要么不存在，要么在于CSS / JavaScript，而不考虑html层次。
使用CSS3变换比例（）缩放/缩放DOM元素及其占据的空间
编辑2 🙁另一个非工作尝试）
我也尝试过这种方式，但是规模和翻译function似乎以一种使最终位置无法预测的方式相互作用……并且在变换之前的规模看起来不像变换那么规模一样。 不幸的是，这不仅仅是通过比例因子调整翻译的问题。
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)本质scale(0.5,0.5)像素的大小改变了原来的一半（可能暗示他们是如何在内部实现的）。 如果我把翻译放在第一位，那么稍微less一些的翻译来解释因尺度造成的左上angular位置的变化将会起到诀窍，但是，在dom变化时pipe理对象的位置和调整变换合理的方式仍然躲过我。 这种感觉是错误的，因为我正在为了得到这个效果而在javascript中编写自己的布局pipe理器。
我注意到的问题是，当元素缩放时，浏览器会改变其像素比例，而不是像素数量。 元素较小，但不会更改DOM中的实际像素大小。 因此，我不认为只存在CSS的解决scheme。
我把可伸缩的元素放入容器中，保持与其余元素相同的像素比例。 使用Java脚本我只是改变容器的大小。 一切仍然基于CSS3转换：规模。 也许JS代码可以是简单的，但现在是关于这个想法（只是一个概念certificate）;）提供两个例子： 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'); }
