web-dev-qa-db-ja.com

divの中心からのCSS遷移の幅と高さ

特定の状況で遷移したいposition：absolute;の要素があります。ただし、幅と高さの遷移の原点は、上下左右の値に依存しているようです。

これをさらに制御する方法はありますか？

特にdivの中心からの移行を検討しています。

上部/下部の左/右の値の遷移にも依存しない解決策はありますか？

編集：

幅と高さの遷移を維持したい。

回答ありがとうございますが、この場合、変換スケールを使用することは解決策ではありません。 Transformプロパティ のパーセンテージは、コンテナではなく、要素の境界ボックスのサイズを参照します。たとえば this JSFiddle を参照してください。2つの要素の上にホバーした場合の最終結果がどのように異なるかを示します。

JSFiddle

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:10%;
  left:10%;
}
span{
  bottom:10%;
  right:10%;
}
<div></div>
<span></span>
htmlcsscss-transitions
11
Alvaro

ええと、いつでも変換を使用できます。

div {
  background:pink;
  width:200px;
  height:200px;
  transition:all 1s ease;
}
div:hover{
        -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
        transform: scale(0.1);
}
<div></div>
4
Chen

効果をシミュレートするために、同時に位置を変更することができます。しかし、私は他の人と一緒にいます：transform: scaleは、これに対するより良いアプローチです。

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
div{
  top:10%;
  left:10%;
}
div:hover{
  width:10%;
  height:10%;
  top: 20%;
  left: 20%;
}
span{
  bottom:10%;
  right:10%;
}
span:hover{
  width:10%;
  height:10%;
  bottom: 20%;
  right: 20%;
}
<div></div>
<span></span>

変換ありのバージョン：

div, span {
  width:30%;
  height:30%;
  background: red;
  transition: all 1s ease;
  position: absolute;
}
div{
  top:10%;
  left:10%;
}
div:hover{
  transform-Origin: 50% 50%;
  transform: scale(0.3);
}
span{
  bottom:10%;
  right:10%;
}
span:hover{
  transform-Origin: 50% 50%;
  transform: scale(0.3);
}
<div></div>
<span></span>
3
Jordi Nebot

パフォーマンスの向上 であるため、位置をアニメーション化するときは_transform: translate_を使用することをお勧めします。その後、_transform-Origin_でOriginを制御できます。

また、幅または高さを変更する場合は、同様に_transform: scale_を使用できます。

中心から外側に向かってサイズを2倍にしたいとします。次に、_transform-Origin_のデフォルト値は_50% 50%_であるため、transform: scale(2.0)を記述するだけで済みます。

ここの例を参照してください： https://jsfiddle.net/ydpx284g/

2
MateBoy

transform: translate(-50%, -50%);を使用してみると、効果があるかどうかを確認できます。

.example {
  width: 30%;
  height: 30%;
  background: pink;
  transition: all 1s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.example:hover {
  width: 10%;
  height: 10%;
}
<div class="example"></div>
1
Stickers

これがまさにあなたが探しているものかどうかはわかりませんが、この解決策はtransform: scaleそして、パーセンテージでもホバー時にdivの希望の幅と高さを手動で設定できます。

また、パーセンテージはコンテナの幅を基準にしています。

[〜＃〜] html [〜＃〜]

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

[〜＃〜] css [〜＃〜]

#container{
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;
}

.box:hover{
  width: 7%;
  height: 10%;
}

.box:nth-child(2){
  left: 20%;
}

.box:nth-child(3){
  top: 20%;
}

.box:nth-child(4){
  top: 20%;
  left: 20%;
}

#container {
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;
}
.box:hover {
  width: 7%;
  height: 10%;
}
.box:nth-child(2) {
  left: 20%;
}
.box:nth-child(3) {
  top: 20%;
}
.box:nth-child(4) {
  top: 20%;
  left: 20%;
}
<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
1
SvenL

最善の方法は行列を使用することです。これにより、遷移と変換を組み合わせることができます。行列は6つの引数を取ります

変換：行列（a、b、c、d、e、f）;

どこ

a = X軸のスケール

b = skewX

c = skewY

d = Y軸のスケール

e = Xの位置

f =位置Y

この場合、X軸のスケール（幅を変更します）をホバー後の初期幅の2倍に設定します。 （値2は初期スケール時間2を意味します）Y軸のスケールは変更されません（値1は初期スケール時間1を意味するため、高さは変更されません）必要がないため、残りの引数は0です。この場合に使用します。

.example {
  width: 30%;
  height: 30%;
  background-color: pink;
  position: absolute;
  top: 35%;
  left: 35%;
  transition: width, height, transform 1s;
}
.example:hover {
  transform: matrix(2, 0, 0, 1, 0, 0);
}
<div class="example"></div>
1
PoloK

これは何を達成しようとしているのですか？ translateを使用すると、要素自体の幅と高さに基づいて要素の位置が変更されます。

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
  transform: translate(-50%, -50%);
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:25%;
  left:25%;
}
span{
  top:75%;
  left:75%;
}
<div></div>
<span></span>
0
Ricky Stefano