Was ist die Referenz für die CSS-Übersetzungsfunktion?

Question

Ich frage mich, was ist die Referenzposition für CSS-Übersetzungsfunktion.

zum Beispiel, wenn ich ein:

p { 
 
    transform:translate(100px,100px); 
 
}

<div id="container"> 
 
    <p> Try! </p> 
 
</div>

in Firefox Entwickler-Tool, können Sie eine grüne und eine blaue "Box" sehen, die grüne die Referenzposition ist, und das Blau ist die reale Position des Objekts.

Aber die Referenz ist weder in der oberen linken Ecke des Fensters noch der Eltern des Objekts. Und ich bin sicher, dass ich keine Eigenschaft wie Polsterung und Rand habe.

Answer 1

Die Transformationsfunktion versetzt das angewendete Element von dem Platz, den es normalerweise auf der Seite einnehmen würde, wobei der erste Wert den horizontalen und der zweite den vertikalen Offset darstellt. Betrachten Sie die folgende Gruppe von Elementen, wo translate zum dritten eine angewendet wurde, bewegt es 10px und unten 5px links:

body{ 
 
    color:#fff; 
 
    font-family:sans-serif; 
 
    font-size:0; 
 
    text-align:center; 
 
} 
 
p{ 
 
    background:#000; 
 
    display:inline-block; 
 
    font-size:14px; 
 
    margin:0; 
 
    padding:5px; 
 
} 
 
p:nth-of-type(3){ 
 
    background:#090; 
 
    transform:translate(10px,5px); 
 
}

<p>Some text</p> 
 
<p>A little more text</p> 
 
<p>This text is transformed</p> 
 
<p>This paragraph isn't</p> 
 
<p>Nor is this last one</p>

Answer 2

Die korrekte Syntax ist:

p { 
    transform: translate(100px, 100px); 
} 

Arbeitsbeispiel hier:

https://jsfiddle.net/hhhotv8x/

Die obere linke Ecke der Position (0, 0) eine Übersetzung Definition auf der oberen basiert linke Position des Behälters. Also, die Definition ist implizit, in jedem Fall wäre es "0,0", weil es vom Container abhängt.

Answer 3

TL; DR: es ist die linke obere Ecke (einschließlich Rand) des Elternelements.

---

Es ist die transformation matrix:

eine Matrix, die die mathematische Zuordnung von einem Koordinatensystem in eine andere definiert. Es wird aus den Werten der Transformations- und Transformationsursprungseigenschaften berechnet, wie es beschrieben ist below.

Nach w3.org:

Die Transformationsmatrix wird aus den berechneten Eigenschaften transformieren und transformations Herkunft wie folgt:

• Beginnen Sie mit der Identitätsmatrix.
• durch die berechneten X übersetzen, Y und Z Werte von Transformations-origin
• Multiplizieren von jedem der Transformationsfunktionen in Transformationseigenschaft von links nach rechts
• durch die negierte berechnet X übersetzen, Y und Z Werte von Transformations-origin

In diesem Fall sind Sie translate so die transform-origin hat keinen Einfluss auf die transformierten Position der Elemente zu verwenden.

dass sie Mittel wird von der setzten Koordinatensystem des <div id="container"> Element, das die top left corner (0,0) of the bounding box ist.

<length>

ein Längenwert ergibt einen festen Länge als Offset. Der Wert für den horizontalen und vertikalen Offset stellt einen Offset von der oberen linken Ecke des Begrenzungsrahmens dar. ändern

Also, wenn Sie Rand auf die #container die Position der wird <p> hinzufügen.

#container { 
 
    margin: 20px; 
 
} 
 
p { 
 
    transform:translate(100px,100px); 
 
}

<div id="container"> 
 
    <p> Try! </p> 
 
</div>