examples - Transformación CSS con cambio de tamaño del elemento
transition css hover (3)
Encontré esto: ancho / alto después de la transformación
y muchos otros, pero nada es exactamente lo que estoy buscando. Lo que quiero es escalar algo al 50% de su tamaño (con una agradable transición animada del curso) y hacer que el diseño de la página se reajuste al nuevo tamaño (visual) del elemento. Lo que parece suceder por defecto es que el elemento aún conserva su tamaño original en la estructura de disposición, y simplemente se dibuja con las transformaciones asociadas.
Básicamente quiero que el usuario haga clic en un bloque de texto (u otro contenido), y luego escale ese texto al 50% (o lo que sea) de su tamaño y lo pegue en un panel a continuación para indicar que ha sido seleccionado. No quiero 50% de espacio en blanco alrededor del elemento después de moverlo.
He intentado volver a configurar el alto / ancho, pero eso hace que el elemento se someta a un nuevo diseño y luego la escala se aplica al nuevo diseño, y esto me deja con un 50% de espacio en blanco una vez que todo ha terminado. Mi código específico de Mozilla (por simplicidad) se ve así:
<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>
Realmente espero no tener que meterme con los márgenes negativos o el posicionamiento relativo para lograr esto ...
Editar: Desde que escribí esto, encontré una pregunta muy similar sin comentarios ni respuestas. Difiere levemente ya que no me importa que sea una solución específica html5, sospecho que la solución no existe o yace en CSS / javascript independientemente del nivel html.
Escala / amplía un elemento DOM y el espacio que ocupa usando la escala de transformación CSS3 ()
Editar 2: (otro intento que no funciona)
También he intentado esto, pero la escala y las funciones de traducción parecen interactuar de una manera que hace que la posición final sea imposible de predecir ... y escalar antes de que la transformación no parezca ser la misma que la transformación luego la escala. Lamentablemente, no se trata solo de ajustar la traducción por el factor de escala ...
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 ;
}
Incluso si funcionó, lo anterior aún me requeriría mover primero el elemento al pie de la página antes de ejecutar este código (para deshacerse de los espacios en blanco), y además tendría que volver a calcular la transformación en el tamaño. así que no estaba muy feliz con este intento de empezar de todos modos.
También tenga en cuenta que si usa scale + trans vs trans + scale arriba el resultado es drásticamente diferente.
Edición 3: descubrí los problemas de ubicación ... las transformaciones se aplican en el orden especificado, y la scale(0.5,0.5) esencialmente cambia el tamaño de un píxel a la mitad de lo que era originalmente (probablemente dando a entender cómo lo implementaron internamente) ) Si pongo traducir es primero, traducir un poco menos / más para dar cuenta del cambio en la posición de la esquina superior izquierda causado por la escala hará el truco, pero administrando la ubicación de los objetos y ajustando las transformaciones cuando el dom cambia en una manera razonable todavía me está eludiendo. Este tipo de sensación es incorrecta porque estoy a la deriva en la dirección de escribir mi propio administrador de diseño en javascript solo para obtener este efecto.
El problema que noté es que cuando el elemento se escala, el navegador cambia su relación de píxeles, no la cantidad de píxeles. El elemento es más pequeño pero no cambia su tamaño de píxel real en DOM. Por eso, no creo que exista una solución solo de CSS.
Puse el elemento escalable en un contenedor que mantiene la misma proporción de píxeles que el resto de los elementos. Usando Java Script simplemente cambio el tamaño del contenedor. Todo sigue basándose en la transformación CSS3: escala. Tal vez el código JS podría ser más simple, pero ahora se trata de la idea (solo una prueba de concepto);) Fiddle con dos ejemplos: 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'');
}
Tuve que modificar mi código un poco desde arriba.
Ahora funciona en todos los lados (no solo arriba y abajo). Veo una pequeña edición, creo que es un problema de CSS (podrías agregar otro píxel al código para resolver esto).
Aquí está el enlace de Codepen en funcionamiento. Siéntase libre de decirme si lo usa. Me sentí bien al finalmente resolver esto.
https://codepen.io/cyansmiles/pen/bLOqZo
PD. Estoy bifurcando mi codepen para agregar un CSS movible.
.box-wrap {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
margin: auto;
text-align: center;
margin: 30px 10px;
padding: 40px;
background: yellow;
}
.box-wrap:before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: calc(100% - 80px);
height: calc(100% - 80px);
top: 40px;
left: 40px;
}
.box {
display: inline-block;
box-sizing: border-box;
position: relative;
transform-origin: 50% 0;
width: 300px;
height: 150px;
background: red;
color: #fff;
}
.box.size-80 {
background: red;
transform: scale(0.8);
margin: 0 calc((-300px * (1 - 0.8)) / 2) calc(-150px * (1 - 0.8));
}
.box.size-70 {
background: blue;
transform: scale(0.7);
margin: 0 calc((-300px * (1 - 0.7)) / 2) calc(-150px * (1 - 0.7));
}
.box.size-60 {
background: green;
transform: scale(0.6);
margin: 0 calc((-300px * (1 - 0.6)) / 2) calc(-150px * (1 - 0.6));
}
.box.size-50 {
background: orange;
transform: scale(0.5);
margin: 0 calc((-300px * (1 - 0.5)) / 2) calc(-150px * (1 - 0.5));
}
//etc
<div class="box-wrap">
<h1>This is a bunch of boxes!</h1>
<div class="box size-50">
<h1>Box at 50%</h1>
</div>
<div class="box size-60">
<h1>Box at 60%</h1>
</div>
<div class="box size-80">
<h1>Box at 80%</h1>
</div>
<div class="box size-70">
<h1>Box at 70%</h1>
</div>
<div class="box size-50">
<h1>Box at 50%</h1>
</div>
<div class="box size-60">
<h1>Box at 60%</h1>
</div>
<div class="box size-50">
<h1>Box at 50%</h1>
</div>
<div class="box size-60">
<h1>Box at 60%</h1>
</div>
<div class="box size-80">
<h1>Box at 80%</h1>
</div>
<div class="box size-70">
<h1>Box at 70%</h1>
</div>
<div class="box size-50">
<h1>Box at 50%</h1>
</div>
<div class="box size-60">
<h1>Box at 60%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box">
<h1>Box at 100%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-80">
<h1>Box at 80%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-70">
<h1>Box at 70%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-60">
<h1>Box at 60%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-50">
<h1>Box at 50%</h1>
</div>
</div>
Finalmente descubrí una solución simple y es muy similar a donde comencé.
Debo admitir que me tomó muchos intentos resolver esto (durante el último año más o menos) para finalmente resolverlo. En realidad estaba buscando una respuesta a esta pregunta. He tenido problemas con esto antes. De todos modos, comencé a trabajar de nuevo y encontré una solución simple.
De todos modos, el truco fue usar el margen inferior junto con el script de CSS CSS.
Además, debe tener la altura absoluta declarada para el objeto (div). No creo que esto funcionará si el div puede expandirse, de lo contrario, después de muchos intentos y horas, finalmente tengo una solución de trabajo muy simple y limpia.
Entonces, por ejemplo, height = 300px (no 30%, o no height). Incluso establecería overflow-y = hidden si puedes. Si quieres que div crezca (no tiene una altura absoluta), creo que necesitarás JavaScript. No lo intenté. De lo contrario, esto está funcionando correctamente en todas las pruebas.
Estoy seguro de que esto funcionará bien con SASS o LESS ya que podría declarar algunas de las cosas repetidas usando variables en el CSS. No lo he intentado todavía.
Algunos comentarios importantes sobre mi solución:
- Tenga en cuenta que estoy usando la altura del objeto y un método CSS calc junto con el tamaño de transformación para descubrir el margen inferior.
- Coloré mi trabajo para ayudar a mostrar lo que está sucediendo.
- la envoltura div tiene un relleno solo para mostrar que está funcionando. Son absolutos y no afectan el objeto interno.
- Si estaba creando una página receptiva, como yo, puede usar las consultas de medios frente a las clases para obtener el mismo efecto.
- Estoy usando origen de transformación: 50% 0; Este código terminó siendo tan importante como originalmente pensé que sería. Estoy usando el margen inferior para resolver los problemas que tuve.
- En este ejemplo, solo estoy centrando el div en el div principal. Si necesita colocar el div, es un poco más complicado, pero una solución similar funcionará. No lo intenté.
- Puede usar esta misma solución con jQuery vs CSS. La idea es la misma Debería buscar todos los elementos con la transformación en la página y agregar el CSS según sea necesario.
También he configurado un Codepen para probar esto con y para compartir.
https://codepen.io/cyansmiles/details/yvGaVP
.box-wrap {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
margin: auto;
text-align: center;
margin: 30px 10px;
padding: 40px;
background: yellow;
}
.box-wrap:before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: calc(100% - 80px);
height: calc(100% - 80px);
top: 40px;
left: 40px;
}
.box {
display: inline-block;
box-sizing: border-box;
position: relative;
transform-origin: 50% 0;
width: 300px;
height: 150px;
background: red;
}
.box.size-80 {
transform: scale(0.8);
margin: 0 auto calc(-150px * (1 - 0.8));
}
.box.size-70 {
transform: scale(0.7);
margin: 0 auto calc(-150px * (1 - 0.7));
}
.box.size-60 {
transform: scale(0.6);
margin: 0 auto calc(-150px * (1 - 0.6));
}
.box.size-50 {
transform: scale(0.5);
margin: 0 auto calc(-150px * (1 - 0.5));
}
//etc
<div class="box-wrap">
<div class="box">
<h1>Box at 100%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-80">
<h1>Box at 80%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-70">
<h1>Box at 70%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-60">
<h1>Box at 60%</h1>
</div>
</div>
<div class="box-wrap">
<div class="box size-50">
<h1>Box at 50%</h1>
</div>
</div>