web-dev-qa-db-ja.com

要素の高さと幅に基づいてXとYのパーセンテージ値を変換しますか？

要素のY軸を50％移動すると、親の高さの50％ではなく、自分の高さの50％が下に移動します。翻訳要素に、親要素に基づいた翻訳割合を指示するにはどうすればよいですか？それとも私は何かを理解していないのですか？

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

css3translatepercentagetranslate3d
69
Andrew Tibbetts

変換でパーセンテージを使用する場合、それはそれ自体の幅または高さを指します。 https://davidwalsh.name/css-vertical-center （ demo ）を見てください：

CSS変換の興味深い点の1つは、パーセント値を適用すると、上、右、下、左、マージン、パディングなどのプロパティとは対照的に、実装される要素の次元に基づいて値を決定することです。 、親の寸法のみを使用します（または、最も近い相対的な親を使用する絶対配置の場合）。

34
bowen

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

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

  100% {
    transform: translateY(0vh);
  }
}
24
Kokodoko

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%);
}

使い方：

  • 上と左の配置は、親座標に従って子ウィジェットを移動します。子ウィジェットの左上隅は、親のちょうど中央に表示されます（これは現時点では望んでいないことです）。
  • 翻訳は、子ウィジェットを（親ではなく）サイズに基づいて-50％上と左に移動します。つまり、ウィジェットの中心点は、左上の点があった場所に正確に移動します-以前は親の中心として設定されていましたが、これが必要なものです。
12
zolv

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)";​​​​​​​​​​​​​​​​​​​​​​​​​​

私はあなたを助けることができ、他の問題がある場合は私に言うことができると思います。

6
Lucas Willems

あなたの声明は、非常に翻訳された要素に由来するパーセンテージについて絶対に正しいです。ケースで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%;
    }
3
iulial

また、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;
}
1
Petryk P'yatochkin

次のURLで必要なポジショニングで分岐 作業サンプル

body {
margin: 0;
width: 100%;
height: 100%;
}

body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}

body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}

ノート ：

  1. 親要素を相対的な位置に変更することにより、赤い正方形の絶対位置を設定できます
  2. 上部50％と左側50％を使用すると、左上隅に応じて赤い正方形が配置されます
  3. transform：translate（-50％、-50％）を使用すると、その中心に従って赤い正方形が配置されます
1
Mhmad Q.Abdelhaq

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

1
user4993573

この問題の解決策は、変換をまったく使用しないことです。要素を翻訳する場合、選択する割合は要素の高さに基づきます。

親の高さに基づいて要素を配置する場合は、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;
}
0
Vlad