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/... 😉
Vous devez vous connecter pour publier un commentaire.
Le problème que j'ai remarqué, c'est que lorsque l'élément échelles, navigateur modifier ses pixels ratio, pas de pixels montant. L'élément est plus petit, mais il ne change pas sa réelle de la taille des pixels dans les DOM. De ce fait je ne pense pas que CSS seule solution existe.
J'ai mis évolutive élément dans le récipient qui conserve le même ratio de pixel comme le reste des éléments. À l'aide de Java Script, j'ai simplement modifier le conteneur de la taille. Tout est toujours basé sur CSS3 transform: scale. Peut-être du code JS pourrait être plus simple, mais maintenant, il est tout au sujet de l'idée (juste une preuve de concept);) jouer avec deux exemples: http://jsfiddle.net/qA5Tb/9/
HTML:
CSS:
JS:
J'ai finalement trouvé une solution simple et il est très similaire à celle où j'ai commencé à partir.
J'avoue, il m'a fallu plusieurs tentatives pour comprendre cela (au cours de la dernière année) pour enfin comprendre. En réalité, j'étais à la recherche d'une réponse à cette question. J'ai eu des problèmes avec cela. De toute façon, j'ai commencé à travailler ce nouveau et j'ai trouvé une solution simple.
De toute façon, l'astuce est d'utiliser la marge en bas avec le CSS calc script.
Aussi, vous devez avoir une hauteur absolue déclaré pour l'objet (div). Je ne pense pas que cela va fonctionner avec si la div pouvez étendre, sinon, après de nombreuses tentatives et des heures sur ce j'ai enfin un très simple, propre, solution de travail.
Ainsi, par exemple, hauteur = 300px (et non pas 30%, ou pas de hauteur). Je dirais même ensemble overflow-y = cachés si vous le pouvez. Si vous souhaitez que le div de croître (ne pas avoir une hauteur absolue), je crois que vous aurez besoin de JavaScript. Je n'ai pas essayé. Sinon, c'est de travailler correctement dans tous les tests.
Je suis sûr que cela va fonctionner de nice avec SASS ou MOINS, car vous pourriez déclarer certains de la répétition de choses à l'aide de variables dans le CSS. Je n'ai pas essayé encore.
Quelques remarques importantes sur ma solution:
J'ai également disposer d'un Codepen pour tester avec et pour le partage.
https://codepen.io/cyansmiles/details/yvGaVP
CSS:
HTML:
J'ai dû modifier mon code un peu à partir de ci-dessus.
Il fonctionne maintenant sur tous les côtés (et pas seulement en haut et en bas). Je vois un peu modifier, je pense que c'est une question CSS (vous pouvez ajouter un autre pixel de code pour résoudre ce).
Ici est le travail Codepen lien. N'hésitez pas à me faire savoir si vous l'utilisez. Ça faisait du bien d'enfin comprendre cela.
https://codepen.io/cyansmiles/pen/bLOqZo
ps. Je suis un fork de mon codepen pour ajouter un mobile CSS.
CSS:
HTML: