X- und Y-Prozentwerte basierend auf Höhe und Breite der Elemente übersetzen?

80

Wenn Sie die Y-Achse eines Elements um 50% verschieben, wird sie um 50% ihrer eigenen Größe nach unten verschoben, nicht um 50% der Größe der Eltern, wie ich es erwarten würde. Wie kann ich einem übersetzenden Element mitteilen, dass sein Übersetzungsprozentsatz auf dem übergeordneten Element basiert? Oder verstehe ich etwas nicht?

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

Andrew Tibbetts
quelle
6
Okay, es sieht so aus, als gäbe es keinen Weg daran vorbei. Die prozentuale CSS-Übersetzung verwendet den Prozentsatz des Elements, das übersetzt wird, um die zu bewegende Entfernung zu ermitteln. Es verhält sich nicht wie eine typische CSS-Deklaration wie top, margin-top oder padding-top, die alle auf dem übergeordneten Container basieren.
Andrew Tibbetts
1
Danke, mir war nicht sofort klar, wie viel Prozent der Prozentsatz war.
Philip Walton
3
Das nächste, was Sie wissen, ist, dass Prozentsätze auch den Prozentsatz der Schriftgröße bedeuten! (oh ...)
Kevin Peno

Antworten:

41

Wenn Sie den Prozentsatz in der Übersetzung verwenden, bezieht er sich auf die Breite oder Höhe von sich selbst. Schauen Sie sich https://davidwalsh.name/css-vertical-center ( Demo ) an:

Eine interessante Sache bei CSS-Transformationen ist, dass sie beim Anwenden mit Prozentwerten diesen Wert auf den Dimensionen des Elements basieren, auf dem sie implementiert werden, im Gegensatz zu Eigenschaften wie oben, rechts, unten, links, Rand und Abstand , die nur die Dimensionen des Elternteils verwenden (oder bei absoluter Positionierung das nächstgelegene relative Elternteil verwenden).

Bowen
quelle
2
Aber beim Animieren einer SVG transform: translate(50%)scheint die Breite und Höhe des übergeordneten Elements zu verwenden
Atav32
27

Sie können vw und vh verwenden, um basierend auf der Größe des Ansichtsfensters zu übersetzen

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

  100% {
    transform: translateY(0vh);
  }
}
Kokodoko
quelle
Das funktioniert bei mir nicht ... vh ~ 40 ist wie am Ende der Seite?!
AturSams
Es war mein schlechtes ... das Element war nicht in einem absoluten Element ... :)
AturSams
11
@AxeEffect Dies sollte nicht die akzeptierte Antwort sein. Dies bezieht sich auf das Ansichtsfenster und nicht auf das übergeordnete Element. Was ist, wenn das übergeordnete Element nicht die volle Größe des Ansichtsfensters hat?
trusktr
@wolfdawn Wenn Sie Skalierung verwenden, ist die Reihenfolge wichtig. Also "scale (1.5) translateY (40vw)" ist nicht dasselbe wie "translateY (40vw) scale (1.5)".
Kardaw
1
Sie sollten wissen, dass Apple und Google das vh-Gerät in mobilen Browsern defekt haben und es in diesem Fall unzuverlässig ist.
Kev
17

Was für mich funktioniert, wenn ich nur CSS verwende, ist:

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

Wie es funktioniert:

  • Die obere und linke Position verschieben das untergeordnete Widget gemäß den übergeordneten Koordinaten. Die obere linke Ecke des untergeordneten Widgets wird genau in der Mitte des übergeordneten Widgets angezeigt (dies ist derzeit nicht das, was wir wollen).
  • Durch die Übersetzung wird das untergeordnete Widget je nach Größe um -50% nach oben und links verschoben (nicht das übergeordnete Widget). Dies bedeutet, dass der Mittelpunkt des Widgets genau dort verschoben wird, wo sich der obere linke Punkt befand - der zuvor als Mittelpunkt eines übergeordneten Elements eingerichtet wurde, und das ist, was wir wollen.
zolv
quelle
6

Um den Prozentsatz in der Eigenschaft translate zu verwenden, müssen Sie Javascript verwenden: http://jsfiddle.net/4wqEm/27/

HTML Quelltext :

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

CSS-Code:

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

Javascript-Code:

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

Ich hoffe, ich konnte Ihnen helfen und mich sagen, wenn Sie ein anderes Problem haben.

Lucas Willems
quelle
1
Ich kann es nicht nur mit CSS3 tun?
Dchris
3
Dies ist verzögert (nicht Ihre Antwort, nur die Tatsache, dass Spezifikationsautoren dies in CSS nicht geschafft haben und dass wir JS verwenden müssen).
trusktr
3

Ihre Aussage ist absolut richtig in Bezug auf die Prozentsätze, die aus dem sehr übersetzten Element stammen. Anstatt in Ihrem Fall die Eigenschaft translate zu verwenden, sollten Sie die absolute Positionierung verwenden, um relativ zum übergeordneten div zu bleiben. Ich habe Ihr rotes Div hier absolut vertikal positioniert: (Vergessen Sie nicht, die Position relativ zum übergeordneten Div hinzuzufügen. Es muss anders als die statische Standardeinstellung positioniert werden):

js Geigenstift hier

 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%;
    }
iulial
quelle
1
Aber oben und links zu animieren ist nicht hardwarebeschleunigt, oder?
trusktr
1

Sie können auch einen zusätzlichen Block verwenden und den Übergang dafür verwenden, mit Ausnahme des untergeordneten Knotens

HTML Quelltext :

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

CSS sollte so etwas sein

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0;
}
#childrenWrapper{
    width: 100%;
    height: 100%;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}
Petryk P'yatochkin
quelle
1

Sie können das Element absolut positionieren und die Eigenschaft left und top verwenden, um den Prozentwert als übergeordnetes Element zu verwenden.

user4993573
quelle
1

Es ist mit einer Positionierung versehen, die für das folgende URL- Arbeitsprobe erforderlich ist

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

Anmerkungen :

  1. Sie können Ihr rotes Quadrat absolut positionieren, indem Sie das übergeordnete Element in die relative Position ändern
  2. Wenn Sie dann 50% oben und 50% links verwenden, wird das rote Quadrat entsprechend der oberen linken Ecke positioniert
  3. Mit transform: translate (-50%, - 50%) wird das rote Quadrat entsprechend seiner Mitte positioniert
Mhmad Q.Abdelhaq
quelle
0

Die Lösung für dieses Problem besteht darin, überhaupt keine Übersetzung zu verwenden. Wenn Sie ein Element übersetzen, basiert der ausgewählte Prozentsatz auf seiner eigenen Höhe.

Wenn Sie das Element basierend auf der Größe des Elternteils positionieren möchten, verwenden Sie top: 50%;

Der Code sieht also folgendermaßen aus:

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;
}
Vlad
quelle