Espacio en blanco alrededor de la escala css3

Tengo un pequeño problema que quiero solucionar, pero no puedo encontrar una buena respuesta:

Cuando uso una escala en un div (que contiene otros divs), deja un espacio en blanco alrededor del ancho y alto “original” de mi div:

enter image description here

¿Cómo puedo eliminar el espacio que rodea el div mientras estoy escalado?

¡Puedo usar js si es necesario!

EDITAR: Aquí hay un código:

HTML

src}})">
src}})">
src}})">
src}})">
src}})">

CSS (realmente no necesitas saber cómo está hecho el paquete, es mucho css3 para nada, básicamente solo sesga, gira, escala para hacer un render 3D desde una plantilla plana)

 .quarter.scale-thumb { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } 

PD: la primera foto es cuando no agrego la clase scale-thumb

La solución es envolver el elemento dentro de un contenedor y cambiar su tamaño también mientras la báscula () está lista

Demostración de Jsfiddle: http://jsfiddle.net/2KxSJ/

código relevante es:

 #wrap { background:yellow; height:66px; width:55px; padding:10px; float:left; -webkit-transition:0.5s all; -moz-transition:0.5s all; /* more transition here */ } #wrap:hover { height:300px; width:260px; } .quarter { padding:20px; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); background:red; width:250px; -webkit-transform-origin:left top; -webkit-transition:0.5s all; -moz-transition:0.5s all; /* more transition here */ } #wrap:hover .quarter { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin:left top; -moz-transform-origin:left top; /* more transform-origin */ } 

cómo funciona la transform es:

  1. tu elemento se renderiza
  2. su elemento se transforma (movido, girado, escalado)
  3. otros elementos permanecen donde fueron renderizados – alrededor del “elemento original”

entonces el espacio en blanco es realmente la forma en que el elemento se procesó en primer lugar.

Debería usar width y height en CSS si desea representar el tamaño de los elementos de manera diferente y que los elementos circundantes respondan a él.

O puede usar algo como javascript para cambiar el tamaño de las cosas.

Encontré este problema y lo resolví de esta manera, utilicé SCSS para no repetir los mismos números a lo largo del código. El código siguiente simplemente mueve el elemento hacia la derecha como la disminución del zoom, para volver a alinearlo.

 $originalWidth: 100px; $rate: 0.5; parent { width: $originalWidth; } parent > div { transform: scale(1); } parent:hover { width: $originalWidth*$rate; } parent:hover > div { transform: translateX(($originalWidth * ($rate - 1))/2) scale($rate); /* the order matters*/ } 

Puede deshacerse de SCSS simplemente usando variables CSS y calc() , si lo prefiere.

Resolví esto agregando un ‘ esquema: 1px sólido transparente ‘ al elemento donde se aplica la escala.

 #wrap:hover .quarter { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin:left top; -moz-transform-origin:left top; outline: 1px solid transparent; }