J'ai un petit problème que je veux résoudre, mais je ne trouve pas de bonne réponse:
Lorsque j'utilise une échelle sur une div (qui contient d'autres divs), elle laisse un espace blanc autour de la largeur et de la hauteur "d'origine" de ma div:
Comment puis-je supprimer l'espace vide autour de la div alors qu'il est mis à l'échelle?
Je peux utiliser js si besoin!
EDIT: Voici du code:
HTML
<div class="pull-right nextpack">
<div class="quarter scale-thumb">
<div class="up">
<div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
</div>
<div class="face">
<div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
<div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
</div>
<div class="cote-droit">
<div class="inner">
<div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
<div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
</div>
</div>
</div>
</div>
CSS (vous n'avez vraiment pas besoin de savoir comment le pack est fait, c'est beaucoup de css3 pour rien, en gros il suffit d'incliner, de faire pivoter, de redimensionner pour faire un rendu 3D à partir d'un modèle plat
.quarter.scale-thumb
{
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}
PS: La première photo est quand je n'ajoute pas la classe scale-thumb
la solution consiste à envelopper l'élément dans un conteneur et à le redimensionner pendant la mise à l'échelle ()
Jsfiddle demo: http://jsfiddle.net/2KxSJ/
le code pertinent est:
#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 */
}
comment fonctionne transform
est:
de sorte que l'espace blanc est vraiment juste la façon dont l'élément a été rendu en premier lieu.
Vous devez utiliser width
et height
en CSS si vous souhaitez afficher la taille des éléments différemment et que les éléments environnants y répondent.
Ou vous pouvez utiliser quelque chose comme javascript pour redimensionner les choses.
J'ai rencontré ce problème et je l'ai résolu de cette façon. J'ai utilisé SCSS afin de ne pas répéter les mêmes numéros le long du code. Le code ci-dessous déplace simplement l'élément vers la droite lorsque le zoom diminue, afin de le réaligner.
$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*/
}
Vous pouvez vous débarrasser du SCSS en utilisant simplement des variables CSS et calc()
, si vous préférez.
J'ai résolu mon problème comme le vôtre de cette façon.
J'ai un conteneur principal et je veux le diminuer
mon css: .grid-container.full {
transform: scale(0.6);
transform-Origin: top center;
}
mais mon conteneur avait la marge inférieure plus grande . alors je le fais:
$mainGrid = $('.grid-container.full')
$mainGrid.css('height', $mainGrid.height() * .6);