12

<div>小さいサイズから大きいサイズに拡張したいものがあるとします（これを参照）。

デフォルトでは、の幅と高さのCSS3トランジションは<div>左上から始まり、右下に進みます。<div>ただし、右上隅から左下に拡大したい。

ここに私の質問があります：<div>右上隅から左下隅に幅と高さの遷移を行う方法はありますか？

これが私の質問を明確にするための画像です。基本的には<div>、左側のボックスで示されているデフォルトの方法ではなく、右側のボックスのように拡張したいと思います。 問題の説明：<code> <div> </ code>を、左上から右下にではなく、下に示すように右上から左下に展開したいと思います。

別の画像は次のとおりです。 ここに画像の説明を入力してください

4

5 に答える 5

10

物事を「シフト」させたいので、右から左に成長しているという事実は実際にはわかりませんが、これはあなたが望んでいることを達成していると思います（他のマージンを微調整し、相対的なものを追加しますシフト）：

  div {
        width:100px; 
        height:100px; 
        float:left;
        margin:5px;
        position: relative;
        right: 0;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        background-color:rgba(25,25,25,0.7);
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
    }
  div:hover {
        width:200px;
        height:200px;
        margin:10px 115px 0px -105px;
        right: -110px;
    }

フロートの性質とアイテムのシフトのために、多くの要素で奇妙な動作が発生することに注意してください。少なくとも2行のdivがあるように、このフィドルが小型化されたら、いじってみてください。

マージンの説明

右マージンは115px、次の要素を押して（必要な「シフト」）、要素を拡張するためのスペースを作ります。これは、要素の幅に要素の5pxマージンを加えたものであり、サイズの大きい要素がマージンをに増やしているという事実です10px。シフトが発生するのはこの空間です。right展開自体の方向は、を介して発生します-105px。これにより、要素が左に展開されます（元々必要だったように）。

新しい写真の更新：このフィドルを見てください。まだいくつかの小さなバグがありますが、3つのdivのセットに基づいてうまく機能します（span私の機能を機能させるために余分な非セマンティックがあります）。

于 2013-01-15T13:25:43.947 に答える
2

div:hoverマージンを次のようなものに変更してmargin:10px 10px 0px -100px;、目的の効果を得ることができます。ただし、divとホバーの両方でマージンを調整する必要があります（float：rightを使用できない場合）。http://jsfiddle.net/7ZUeu/14/

于 2013-01-13T01:18:40.750 に答える
1

問題のコメントで要求された詳細を待っています。

今のところ私はこのようなタスクを理解していますhttp://jsfiddle.net/7ZUeu/34/

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.wrapper {
  float:left;
}

.box {
  width:100px; 
  height:100px; 
  float:right;
  background:url(http://placekitten.com/200/200/) no-repeat 100% 0;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
}
.box:hover {
  width:200px;
  height:200px;
}
于 2013-01-15T16:45:37.900 に答える
0

これは不完全ですが、おそらく別の固定divでラップするとします。繰り返しますが、これはちょっと醜いですが、おそらく正しい方向に向かっています。（ScottSのフィドルを借りる）。

div.one,.two,.three {
  display: inline-block;
  float: left;
  width:100px; 
  height:100px; 
  margin:3px;
  position: relative;
  right: 0;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  background-color:rgba(25,25,25,0.7);
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}

div.one:hover,div.two:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
  float:right;
}

div.three:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
}

div.fixed {
  width: 330px;
  height: 220px;
  background: whitesmoke;
}

また、divを分割しました。これは、特定の方向に2つしか囲い込めないように見えるためです...

http://jsfiddle.net/YAGmC/1/

于 2013-01-16T04:32:05.037 に答える
0

これを試して：

.right{
width:100px; 
height:100px; 
float:right;
background-color:#000000;
}

.right:hover{
margin-left:-300px;
width:300px;
transition:0.3s
}
于 2015-08-06T09:36:03.820 に答える