CSS Transformer avec un élément de redimensionnement

J'ai trouvé ceci: largeur/hauteur après transformation

et plusieurs autres, mais rien n'est pas tout à fait ce que je cherche. Ce que je veux, c'est quelque chose échelle à 50% de sa taille (avec une belle animation de transition de cours) et d'avoir la mise en page de ré-adapter à la nouvelle (visuelle) de la taille de l'élément. Ce qui semble se produire par défaut, c'est que l'élément conserve encore son taille d'origine dans la structure de mise, et est simplement dessinés avec les transformations associés.

Fondamentalement, je veux que l'utilisateur à cliquer sur un bloc de texte (ou autre contenu), puis à l'échelle de ce texte à 50% (ou autre) de sa taille et de la coller dans un panneau ci-dessous pour indiquer qu'il est sélectionné. Je ne veux pas 50% des espaces autour de l'élément après je la déplace.

J'ai essayé de re-réglage de la hauteur/largeur, mais qui provoque l'élément jeles de subir une nouvelle mise en page, puis l'échelle est appliqué à la nouvelle mise en page et cela me laisse encore avec 50% d'espace blanc après tout est fini. Mon mozilla spécifiques (pour des raisons de simplicité) code ressemble à ceci:

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

Je suis vraiment en espérant que je n'ai pas à aller dans de jouer avec des marges négatives ou le positionnement relatif à atteindre cet objectif...

Edit: Depuis la rédaction du présent, j'ai trouvé une question très semblable ni des commentaires ou des réponses. Il diffère légèrement du fait que je ne m'inquiète pas à ce sujet étant un html5 solution spécifique, je crois que la solution n'existe pas, ou se trouve dans CSS/javascript, quel que soit le niveau de html.

Échelle/zoom sur un élément du DOM et de l'espace qu'il occupe à l'aide de CSS3 transformer scale()

Edit 2: (un autre travail non-tentative)

J'ai aussi essayé cela, mais l'ampleur et de la traduire fonctions semblent interagir d'une manière qui rend la position finale impossible à prévoir... et de l'échelle avant de transformation ne semble pas être le même que transformer ensuite à l'échelle. Malheureusement, il n'est pas juste une question de réglage de la traduire par le facteur d'échelle ...

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

Même si elle a travaillé, au-dessus de nécessiterait encore moi d'abord de déplacer l'élément vers le bas de la page avant d'exécuter ce code (pour se débarrasser de l'espace), et de plus j'aurais besoin de recalculer le transformer sur la re-taille... donc je n'étais pas trop heureux avec cette tentative de commencer avec de toute façon.

Notez également que si vous utilisez scale + trans vs trans + scale ci-dessus le résultat est radicalement différent.

Edit 3: j'ai compris les problèmes de placement... les transformations sont appliquées dans l'ordre spécifié, et scale(0.5,0.5) essentiellement des modifications de la taille d'un pixel à la moitié de ce qu'il était à l'origine (probablement allusion à la manière de mettre en œuvre en interne). Si j'ai mis traduire, c'est d'abord, la traduction d'un peu moins/plus de tenir compte du changement dans la position du coin supérieur gauche causée par l'échelle fera l'affaire, mais la gestion de l'emplacement des objets et en ajustant les transforme lorsque le dom modifications de manière raisonnable échappe toujours moi. Cette sorte de se sent mal parce que je suis à la dérive dans le sens de l'écriture de mon propre gestionnaire de mise en page en javascript juste pour obtenir cet effet.

  • Voulez-vous quelque chose de ce genre - jsfiddle.net/qA5Tb ?
  • Pas vraiment, c'est plus ou moins ce que je veux éviter, parce que je dois gérer la hauteur et la largeur pour chaque sous-élément. Je vais être mise à l'échelle d'une section de contenu qui est plus complexe qu'une zone de texte. Aussi la mise en page pendant la période de transition est en train de faire des choses funky avec le texte tel qu'il évolue qui est assez désagréable. L'échelle() de transformation est beaucoup plus joli. ( Je suis une transition similaire, même si je ne l'ai pas mentionné ci-dessus )
  • Pas sûr, si cela peut aider, mais je suis récemment tombé sur ce ricostacruz.com/jquery.transit pour les animations jQuery avec css3.
  • Comme démontré ci-dessous, qui se borne à reproduire mon problème.
  • voir: stackoverflow.com/questions/7565542/... 😉
InformationsquelleAutor Gus | 2012-06-01