1

これが私の問題です

フィドル

私は4つのdivを持っていますがposition:absolute、それらはあり、それらの位置はそれらのIDに応じて定義されます。

ユーザーがdivをクリックすると、divは回転とスケーリングを遷移させます。私の目標は、結果のdiv（黄色）を非常に特定の場所（親ノードの中央）に配置することです。

現在、私のフィドルでは、それ自体が回転しますが、これは私が望んでいることではありません。

とりわけ私が試したこと。

  • 変換transform:translate(x,y)に追加しますが、これはクリックされる前のdivを基準にしています。つまり、各divは変換されたdivを別の位置に送信します。
  • それが機能することを期待して追加left:5%;top:5%;しますが、機能しません。
  • 追加しますtransform-originが、これも、親や本体ではなく、div自体に関連しています。

私の質問：遷移中のdivの位置を、それ自体ではなく親ノードに関して定義することは可能ですか？

4

2 に答える 2

1

不要なフリッピング効果を削除しました。

position:relative親に追加しました。だから今あなたposition: absoluteが子供たちであるとき、彼らは親に基づいて配置されます。

そして、私はこれを行うことによって中央に黄色の正方形を配置しました：

top:50% !important;
left:50% !important;
margin-top: -75px;
margin-left: -75px;

リンクを含めるのを忘れた：http：//jsfiddle.net/hZfhQ/2/

于 2012-12-20T09:55:10.157 に答える
1

topとオーバーライドが機能しなかった理由leftは、IDセレクターがクラスセレクターよりも具体的であるため、優先されるためです。これは次を使用して修正できます!important：

.isTurning{
    background-color:yellow;
    z-index:1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
    -webkit-transform: scale(2) rotateY(180deg);
    left:27% !important;
    top: 25% !important;
}

または特異性の使用：

#b_1.isTurning, #b_2.isTurning, #b_3.isTurning, #b_4.isTurning{
    background-color:yellow;
    z-index:1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
    -webkit-transform: scale(2) rotateY(180deg);
    left:27%;
    top: 25%;
}​

これがデモンストレーションです：http：//jsfiddle.net/Fs6Zw/

于 2012-12-20T09:57:53.010 に答える