92

要素の Y 軸を 50% 移動すると、親の高さの 50% ではなく、それ自体の高さの 50% だけ下に移動します。翻訳要素に、親要素に基づいて翻訳パーセンテージを設定するように指示するにはどうすればよいですか? それとも私は何かを理解していませんか？

http://jsfiddle.net/4wqEm/2/

4

9 に答える 9

30

vw と vh を使用して、ビューポート サイズに基づいて変換できます

@keyframes bubbleup {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0vh);
  }
}
于 2016-04-13T13:46:24.783 に答える
20

CSSのみを使用して私にとってうまくいくのは次のとおりです。

.child {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Backward compatibility */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

使い方：

  • 上と左の配置は、親座標に従って子ウィジェットを移動します。子ウィジェットの左上隅は、親ウィジェットのちょうど中央に表示されます (現時点では、これは望ましくありません)。
  • translation は、(親ではなく) サイズに基づいて、子ウィジェットを -50% 上下に移動します。つまり、ウィジェットの中心点は、以前は親の中心として設定されていた左上の点があった場所に正確に移動します。これが私たちが望むものです。
于 2016-12-09T12:17:08.033 に答える
7

translate プロパティでパーセンテージを使用するには、Javascript を使用する必要があります: http://jsfiddle.net/4wqEm/27/

HTML コード :

<div id="parent">
    <div id="children"></div>
</div>​​​​​​​​​​​​​

CSS コード :

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Javascript コード :

parent = document.getElementById('parent');
children = document.getElementById('children');

parent_height = parent.clientHeight;
​children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​

他に問題がありましたら、ご連絡いただければ幸いです。

于 2012-12-30T13:50:55.600 に答える
4

非常に翻訳された要素からのパーセンテージについて、あなたの声明は完全に正しいです。あなたの場合、translate プロパティを使用する代わりに、絶対配置を使用して、親 div に対して相対的に保つ必要があります。ここで赤いdivを絶対に垂直に配置しました:(親divに相対的な位置を追加することを忘れないでください.静的なデフォルト以外に配置する必要があります):

jsフィドルペンはこちら

 body {
    margin: 0;
    width: 100%;
    height: 100%;
    }
 body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
    }
 body > div > div {
    width: 10%;
    height: 10%;
    -webkit-transform: translateY(-50%);
    background: #f00;
    position: absolute;
    top: 50%;
    }
于 2016-01-05T10:44:30.437 に答える
2

追加のブロックを 1 つ使用して、子ノードを除いてトランジションを使用することもできます

HTML コード :

<div id="parent">
    <div id="childrenWrapper">    
        <div id="children"></div>
    </div>
</div>​​​​​​​​​​​​​

cssはこのようなものでなければなりません

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0;
}
#childrenWrapper{
    width: 100%;
    height: 100%;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}
于 2014-10-02T12:10:51.943 に答える
1

要素を絶対位置に配置し、 left および top プロパティを使用してパーセンテージ値を親として取得できます。

于 2015-06-17T05:06:10.990 に答える
0

この問題の解決策は、translate をまったく使用しないことです。要素を移動する場合、選択するパーセンテージは要素自体の高さに基づいています。

親の高さに基づいて要素を配置する場合は、top: 50%; を使用します。

したがって、コードは次のようになります。

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
}
body > div > div {
    position: absolute;
    top: 50%;
    width: 10%;
    height: 10%;
/*     -webkit-transform: translateY(50%); */
    background: #f00;
}
于 2018-05-18T13:50:10.230 に答える