ray()
Baseline 2022Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die ray()
CSS Funktion definiert das offset-path
Liniensegment, dem ein animiertes Element folgen kann. Dieses Liniensegment wird als "Strahl" bezeichnet. Der Strahl beginnt bei einer offset-position
und erstreckt sich in die Richtung des angegebenen Winkels. Die Länge eines Strahls kann durch Angabe einer Größe und dem Schlüsselwort contain
eingeschränkt werden.
Syntax
/* all parameters specified */
offset-path: ray(50deg closest-corner contain at 100px 20px);
/* two parameters specified, order does not matter */
offset-path: ray(contain 200deg);
/* only one parameter specified */
offset-path: ray(45deg);
Parameter
Die Parameter können in beliebiger Reihenfolge angegeben werden.
<angle>
-
Gibt die Richtung an, in der sich das Liniensegment von der Versatz-Startposition aus erstreckt. Der Winkel
0deg
liegt auf der y-Achse und zeigt nach oben, und positive Winkel nehmen im Uhrzeigersinn zu. <size>
-
Gibt die Länge des Liniensegments an, das den Abstand zwischen
offset-distance
0%
und100%
relativ zum umgebenden Rahmen darstellt. Dies ist ein optionaler Parameter (closest-side
wird verwendet, wenn keine<size>
angegeben wird). Es akzeptiert einen der folgenden Schlüsselwerte:closest-side
: Abstand zwischen dem Startpunkt des Strahls und der nächstgelegenen Seite des umgebenden Rahmens des Elements. Befindet sich der Startpunkt des Strahls auf einer Kante des umgebenden Rahmens, beträgt die Länge des Liniensegments null. Befindet sich der Startpunkt des Strahls außerhalb des umgebenden Rahmens, wird die Kante des umgebenden Rahmens als ins Unendliche verlaufend betrachtet. Dies ist der Standardwert.closest-corner
: Abstand zwischen dem Startpunkt des Strahls und der nächstgelegenen Ecke im umgebenden Rahmen des Elements. Befindet sich der Startpunkt des Strahls auf einer Ecke des umgebenden Rahmens, beträgt die Länge des Liniensegments null.farthest-side
: Abstand zwischen dem Startpunkt des Strahls und der am weitesten entfernten Seite des umgebenden Rahmens des Elements. Befindet sich der Startpunkt des Strahls außerhalb des umgebenden Rahmens, wird die Kante des umgebenden Rahmens als ins Unendliche verlaufend betrachtet.farthest-corner
: Abstand zwischen dem Startpunkt des Strahls und der am weitesten entfernten Ecke im umgebenden Rahmen des Elements.sides
: Abstand zwischen dem Startpunkt des Strahls und dem Punkt, an dem das Liniensegment die Grenze des umgebenden Rahmens schneidet. Befindet sich der Startpunkt auf oder außerhalb der Grenze des umgebenden Rahmens, beträgt die Länge des Liniensegments null. contain
-
Reduziert die Länge des Liniensegments, damit das Element auch bei
offset-distance: 100%
innerhalb des umgebenden Rahmens bleibt. Insbesondere wird die Länge des Segments um die halbe Breite oder Höhe des Randfeldes des Elements reduziert, je nachdem, was größer ist und niemals weniger als null. Dies ist ein optionaler Parameter. at <position>
-
Gibt den Punkt an, an dem der Strahl beginnt und wo das Element in seinem umgebenden Rahmen platziert wird. Dies ist ein optionaler Parameter. Wenn er enthalten ist, muss der
<position>
Wert dem Schlüsselwortat
folgen. Wenn weggelassen, wird der Wert verwendet, der vomoffset-position
des Elements bestimmt wird. Wenn weggelassen und das Element keinenoffset-position
Wert hat, wird für die Startposition des Strahls der Wertoffset-position: normal
verwendet, der das Element in die Mitte (oder50% 50%
) des umgebenden Rahmens setzt.
Beschreibung
Die ray()
Funktion positioniert ein Element entlang eines Pfades, indem sie dessen Standort in einem zweidimensionalen Raum durch einen Winkel und eine Entfernung von einem Referenzpunkt (polare Koordinaten) festlegt. Diese Funktion ist nützlich für die Erstellung von 2D-Raumübergängen. Zum Vergleich: Diese Methode unterscheidet sich von der Festlegung eines Punktes durch seine horizontalen und vertikalen Abstände von einem festen Ursprung (rechteckige Koordinaten), die von der translate()
Funktion verwendet wird, sowie vom Bewegen eines Elements entlang eines definierten Pfades durch Animation.
Da ray()
im 2D-Raum arbeitet, ist es wichtig, sowohl die initiale Position als auch die Orientierung des Elements zu berücksichtigen. Wenn die ray()
Funktion als offset-path
Wert angewendet wird, können Sie folgende Aspekte steuern:
-
Das Element wird zunächst positioniert, indem der Punkt
offset-anchor
des Elements zur Beginnposition des Versatzes bewegt wird. Standardmäßig wird die Startposition des Strahls vomoffset-position
Wert bestimmt. Wennoffset-position
explizit alsnormal
angegeben ist (oder weggelassen und aufnormal
standardisierte), wird das Element in dercenter
(oder50% 50%
) seines umgebenden Rahmens positioniert. Das Angeben vonoffset-position: auto
setzt die Startposition in dietop left
Ecke (oder0 0
) der Position des Elements. -
Das Element wird initial so gedreht, dass seine Inline-Achse — die Richtung des Textflusses — mit dem durch
ray()
angegebenen Winkel übereinstimmt. Zum Beispiel wird bei einemray()
Winkel von0deg
, der auf der y-Achse, nach oben zeigt, die Inline-Achse des Elements vertikal gedreht, um mit dem Winkel des Strahls zu übereinstimmen. Das Element behält diese Drehung entlang seines Pfades bei. Um dieses Verhalten anzupassen, verwenden Sie dieoffset-rotate
Eigenschaft. Diese ermöglicht es Ihnen, einen anderen Drehwinkel oder eine andere Drehrichtung für das Element festzulegen, was mehr Kontrolle über dessen Erscheinungsbild bietet, während es dem Pfad folgt. Zum Beispiel setztoffset-rotate: 0deg
jede durchray()
angewendete Drehung zurück und richtet die Inline-Achse des Elements wieder mit der Fließrichtung des Textes aus.
Formale Syntax
<ray()> =
ray( <angle> &&
<ray-size>? &&
contain? &&
[ at <position> ]? )
<ray-size> =
closest-side |
closest-corner |
farthest-side |
farthest-corner |
sides
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<length-percentage> =
<length> |
<percentage>
Beispiele
Festlegen des Winkels und der Startposition für einen Strahl
Dieses Beispiel zeigt, wie man mit der Startposition eines Elements arbeitet und wie die Ausrichtung des Elements durch den angegebenen Strahlwinkel beeinflusst wird.
CSS
.box {
background-color: palegreen;
border-top: 4px solid black;
opacity: 20%;
}
.box:first-of-type {
position: absolute;
}
.box1 {
offset-path: ray(0deg);
}
.box2 {
offset-path: ray(150deg);
}
.box3 {
offset-rotate: 0deg;
offset-position: 20% 40%;
offset-path: ray(150deg);
}
.box4 {
offset-position: 0 0;
offset-path: ray(0deg);
}
.box5 {
offset-path: ray(60deg closest-side at bottom right);
}
Ähnlich wie bei transform-origin
, liegt der Standardankerpunkt in der Mitte eines Elements. Dieser Ankerpunkt kann über die offset-anchor
Eigenschaft verändert werden.
In diesem Beispiel werden verschiedene offset-path: ray()
Werte auf die Boxen mit den Nummern 1
bis 5
angewendet. Der "umgebende Block" jeder Box wird mit einer gestrichelten Grenze dargestellt. Eine verblasste Box in der oberen linken Ecke zeigt die Standardposition jeder Box ohne angewendeten offset-position
oder offset-path
, um einen Vergleich nebeneinander zu ermöglichen. Der obere Teil jeder Box ist mit einer solid
Grenze hervorgehoben, um die Unterschiede in den Strahlstartpunkten und Ausrichtungen aufzuzeigen. Nachdem die Box an der Strahlstartposition ausgerichtet wurde, richtet sie sich entsprechend der Richtung des angegebenen Strahlwinkels aus. Ist offset-position
nicht angegeben, ist die Standardposition des Versatzes für den Strahl die Mitte (oder 50% 50%
) des umgebenden Blocks der Box.
Ergebnis
-
box1
wird anfangs positioniert, sodass ihr Ankerpunkt (ihr Zentrum) an der Standard-Starposition des Versatzes (50% 50%
des umgebenden Blocks) ist.box1
wird auch gedreht, um sich in Richtung des0deg
Winkels des Strahls auszurichten. Dies wird nun der Ausgangspunkt des Pfades sein. Sie können die Veränderung in Position und Rotation der Box beobachten, indem Sie sie mit der verblasstenbox0
links vergleichen. Die Box wird gedreht, um mit dem0deg
Winkel entlang der y-Achse nach oben übereinzustimmen. Die Boxdrehung wird durch die Orientierung der Zahl innerhalb der Box deutlich. -
In
box2
wird ein größerer positiver Winkel von150deg
auf den Strahl angewendet, um zu zeigen, wie der Strahlwinkel funktioniert. Beginnend von der oberen linken Ecke wird die Box im Uhrzeigersinn gedreht, um den angegebenen Winkel von150deg
zu erreichen. -
box2
undbox3
haben die gleichenoffset-path
Werte. Inbox3
wird zusätzlich einoffset-rotate
von0deg
auf das Element angewendet. Als Ergebnis bleibt das Element während des gesamten Strahlpfades in diesem spezifischen Winkel gedreht, und das Element wird sich nicht in Richtung des Pfades drehen. Beachten Sie inbox3
, dass der Strahlenpfad bei150deg
liegt, aber die Boxausrichtung wird sich aufgrund vonoffset-rotate
nicht entlang des Pfades ändern. Beachten Sie auch, dass dieoffset-path
Eigenschaft vonbox3
keine startende<position>
angibt, sodass die Startposition des Strahls aus deroffset-position
des Elements abgeleitet wird, die in diesem Falltop 20% left 40%
ist. -
Die
offset-position
vonbox4
ist auf die obere linke Ecke (0 0
) des umgebenden Blocks gesetzt, und als Ergebnis fallen der Ankerpunkt des Elements und die Startposition des Versatzes zusammen. Der Strahlwinkel von0deg
wird auf das Element an diesem Startpunkt angewendet. -
In
box5
gibt dieoffset-path
Eigenschaft denat <position>
Wert an, der die Box an der unteren und rechten Kante des umgebenden Blocks des Elements platziert, und60deg
wird auf den Winkel des Strahls angewendet.
Animieren eines Elements entlang des Strahls
In diesem Beispiel wird die erste Form als Referenz für ihre Position und Orientierung dargestellt. Ein Strahlbewegungspfad wird auf die anderen Formen angewendet.
CSS
body {
display: grid;
grid-template-columns: 200px 100px;
gap: 40px;
margin-left: 40px;
}
.container {
transform-style: preserve-3d;
width: 150px;
height: 100px;
border: 2px dotted green;
}
.shape {
width: 40px;
height: 40px;
background: #2bc4a2;
margin: 5px;
text-align: center;
line-height: 40px;
clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
animation: move 5000ms infinite alternate ease-in-out;
}
.shape2 {
offset-path: ray(120deg sides contain);
}
.shape3 {
offset-rotate: 0deg;
offset-path: ray(120deg sides contain);
}
.shape4 {
offset-position: auto;
offset-path: ray(120deg closest-corner);
}
.shape5 {
offset-position: auto;
offset-path: ray(120deg farthest-corner);
}
@keyframes move {
0%, 20% {
offset-distance: 0%;
}
80%, 100% {
offset-distance: 100%;
}
Ergebnis
In den ersten beiden Beispielen, in denen offset-path
angewendet wird, beachten Sie die Orientierung der Form ohne offset-rotate
und mit offset-rotate
. Beide Beispiele verwenden den Standardwert offset-position
normal
, und daher startet die Pfadbewegung von 50% 50%
. Die letzten beiden offset-path
Beispiele zeigen die Auswirkungen von Ecken <size>
Werten: closest-corner
und farthest-corner
. Der closest-corner
Wert erzeugt einen sehr kurzen offset-path, da die Form bereits an der Ecke ist (offset-position: auto
). Der farthest-corner
Wert erzeugt den längsten offset-path, der von der oberen linken Ecke des umgebenden Blocks zur unteren rechten Ecke verläuft.
Spezifikationen
Specification |
---|
Motion Path Module Level 1 # ray-function |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ray() | ||||||||||||
at <position> | ||||||||||||
<size> |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support