web-dev-qa-db-ja.com

CSS3スケールの周りの空白

私は修正したい小さな問題がありますが、良い答えが見つかりません：

Div（他のdivを含む）でスケールを使用すると、divの「元の」幅と高さから空白が残ります：

enter image description here

スケーリング中にdivの周りのwitheスペースを削除するにはどうすればよいですか？

必要に応じてjsを使用できます！

編集：ここにいくつかのコードがあります：

[〜＃〜] 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 [〜＃〜]（パックの実行方法を本当に知る必要はありません。フラットテンプレートからの3Dレンダリング）

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

PS：最初の写真は、scale-thumbクラスを追加しないときです

cssscale
46
Pretty Good Pancake

解決策は、コンテナ内に要素をラップし、scale（）が行われている間に要素のサイズを変更することです

Jsfiddleデモ： http://jsfiddle.net/2KxSJ/

関連するコードは次のとおりです。

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

transformの仕組みは次のとおりです。

  1. 要素がレンダリングされます
  2. 要素が変換されます（移動、回転、スケーリング）
  3. 他の要素はレンダリングされた場所にとどまります-「元の要素」の周り

そのため、空白は実際には要素が最初にレンダリングされた方法にすぎません。

要素のサイズを別々にレンダリングし、周囲の要素に応答させる場合は、CSSでwidthとheightを使用する必要があります。

または、javascriptなどを使用してサイズを変更できます。

26
Martin Turjak

私はあなたの問題をそのように解決しました。

メインコンテナーがあり、それを減らしたい

私のCSS：.grid-container.full { transform: scale(0.6); transform-Origin: top center; }

しかし、私のコンテナは底のマージンが大きかった。それから私はそれをします：

$mainGrid = $('.grid-container.full') $mainGrid.css('height', $mainGrid.height() * .6);

4
Pablo Papalardo

この問題に遭遇し、この方法で解決しました。コードに沿って同じ数字を繰り返さないために、SCSSを使用しました。以下のコードは、ズームを小さくするとエレメントを右に移動して、再配置します。

_$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*/
}
_

必要に応じて、CSS変数とcalc()を使用するだけでSCSSを取り除くことができます。

3
Cristian Traìna

これを解決するには、スケールが適用される要素に「outline：1px solid transparent」を追加します。

#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;
}
0
Ubby