CSS conversion with element resizing

Question

I found this: width / height after conversion

and several others, but nothing is exactly what I'm looking for. I want to scale something to 50% of its size (with a nice animated transition, of course) and change the page layout to a new (visual) element size. Apparently, by default, it happens that the element still retains its original size in the layout structure and is simply drawn using the associated transformations.

Basically, I want the user to click on a block of text (or other content), and then scale that text to 50% (or something else) of its size and paste it in the panel below to indicate that it is selected. I do not want 50% of the spaces around the element after moving it.

I tried to reset the height / width, but this causes the iself element to go through a new layout, and then the scale is applied to the new layout, and it still leaves me with a 50% space after completion, My code for the mozilla specification (for simplicity ) as follows:

<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 really hope that I don’t have to bother with negative margins or relative positioning in order to achieve this ...

Edit: Since writing this, I have found a very similar question with no comments or answers. It is slightly different, since it doesn’t matter to me that this is an html5 solution, I suspect that the solution either does not exist or is in CSS / javascript regardless of the html level.

Scale / scale the DOM element and the space it occupies using CSS3 scale scale ()

Edit 2: (another non-working attempt)

I also tried this, but the scaling and translation functions seem to interact in such a way that the final position is impossible to predict ... and scaling before the transformation is the same as the transformation and then the scale. Unfortunately, this is not just a matter of setting translation by 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 this worked, the above would still require me to first move the element at the bottom of the page before running this code (to get rid of the space), and in addition, I will need to recalculate the conversion, size ... so I don't was too pleased with this attempt to start anyway.

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

Edit 3: I figured out the placement problems ... transformations are applied in the specified order, and scale(0.5,0.5) substantially resizes the pixel by half of what it was originally from (possibly hinting at how they implemented it domestically). If I first translated, translating a little less / more, to explain the change in the position of the upper left corner caused by the scale, it will do the trick, but controlling the location of objects and adjusting the transformations when the dom changes in a reasonable manner still eludes me. This type seems wrong, because I'm drifting towards writing my layout manager in javascript to get this effect.

Answer 1

The problem I noticed is that when the elements scale, the browser changes the pixel ratio, not the number of pixels. The element is smaller, but it does not change the actual pixel size in the DOM. Because of this, I don’t think there is only a CSS solution.

I put a scalable element in a container that preserves the same pixel ratio as the rest. Using Java Script, I just resize the container. Everything is still based on CSS3 transform: scale. Maybe the JS code may be simpler, but now it's all about this idea (just a proof of concept);) A script 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'); }​