76

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

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

ここに画像の説明を入力

スケーリング中に 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 (実際には、パックがどのように行われるかを知る必要はありません。それは何もない大量の css3 です。基本的には、フラットなテンプレートから 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 クラスを追加していないときです。

4

12 に答える 12

41

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

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

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

要素のサイズを異なる方法でレンダリングし、周囲の要素をそれに応答させたい場合は、CSS でwidthandを使用する必要があります。height

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

于 2013-05-05T15:50:21.107 に答える
0

サイト メニューにドロップダウンを配置するタスクがあり、幅 500px で右上 0.5 にスケーリングされました。私はそれを解決しました：ドロップダウンをタグdivにラップし、次のCSSコードをラッパーに適用します：

div.scale_wrapper{
    position: relative;
    top: 34px;
    margin-right: calc(500px * -0.5);
}

現在の目的のために 34px で遊んでください。-0.5 はスケール

トップサイトメニューのドロップダウン付きデモリンク: https://demo.currency-switcher.com/

于 2021-06-25T15:05:06.507 に答える