web-dev-qa-db-fra.com

Espace blanc autour de l'échelle css3

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:

enter image description here

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

cssscale
42
Pretty Good Pancake

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 */
}
24
user652649

comment fonctionne transform est:

  1. votre élément est rendu
  2. votre élément est transformé (déplacé, pivoté, mis à l'échelle)
  3. les autres éléments restent là où ils ont été rendus - autour de "l'élément d'origine"

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.

23
Martin Turjak

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.

2
Cristian Traìna

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

1
Pablo Papalardo