Cómo escalar elementos DIV con CSS3 y mantener las distancias entre ellos

I'm trying to scale some divs inside a 'workspace' div. The problem I have are with the distance between them (I lose it).

I have read a lot of post about CSS3 transform, in special about scale and translate and origin, but I can't solve the problem...

Can someone explain me how can I keep them? I show one code using a mousewheel plugin, regards.

HTML

<body>
    <div id="workspace">
        <div style="z-index: 101;"><img src="image1-300x300.jpg" /></div>
        <div style="z-index: 102; left: 300px; top: 400px;"><img src="image2-400x400.jpg" /></div>
    </div>
</body>

CO

 #workspace {
            width: 1600px;
            height: 900px;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: inline;
        }
            #workspace > div {
                display: inline;
                position: absolute;
            }

DESARROLLADOR

$(document).ready(function () {
            var scale = 1;  // scale of the image
            var xLast = 0;  // last x location on the screen
            var yLast = 0;  // last y location on the screen
            var xImage = 0; // last x location on the image
            var yImage = 0; // last y location on the image

            // if mousewheel is moved
            $("#workspace").mousewheel(function (e, delta) {
                // find current location on screen 
                var xScreen = e.pageX - $(this).offset().left;
                var yScreen = e.pageY - $(this).offset().top;

                // find current location on the image at the current scale
                xImage = xImage + ((xScreen - xLast) / scale);
                yImage = yImage + ((yScreen - yLast) / scale);

                // determine the new scale
                if (delta > 0) {
                    scale *= 2;
                }
                else {
                    scale /= 2;
                }
                scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale);

                // determine the location on the screen at the new scale
                var xNew = (xScreen - xImage) / scale;
                var yNew = (yScreen - yImage) / scale;

                // save the current screen location
                xLast = xScreen;
                yLast = yScreen;

                // redraw

                $('#mosaicContainer > div').each(function() {
                    $(this).css('-webkit-transform', 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')')
                    .css('-webkit-transform-origin', (xImage) + 'px ' + (yImage) + 'px');
                });

                return false;
            });
        });

preguntado el 28 de mayo de 14 a las 13:05

So you're trying to make the divs larger, and yet keep the space between them the same? Do you plan on letting the divs move close towards the sides of the screen? -

Yes to the first question, and to the second If the divs go outside of the screen it's not a problem. -

Here's a JS Fiddle so that people can look into your code: jsfiddle.net/4LHNN -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.