ray()

Die Parameter können in beliebiger Reihenfolge angegeben werden.

<angle>

Gibt die Richtung an, in der sich das Liniensegment von der Startposition 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, welches die Distanz zwischen offset-distance 0% und 100% darstellt, relativ zur umgebenden Box. Dies ist ein optionaler Parameter (closest-side wird verwendet, wenn keine <size> angegeben ist). Er akzeptiert eine der folgenden Schlüsselwortwerte:

closest-side: Distanz zwischen dem Startpunkt des Strahls und der nächstgelegenen Seite des umgebenden Blocks des Elements. Wenn der Startpunkt des Strahls auf einer Kante des umgebenden Blocks liegt, ist die Länge des Liniensegments null. Wenn der Startpunkt des Strahls außerhalb des umgebenden Blocks liegt, wird die Kante des umgebenden Blocks als unendlich betrachtet. Dies ist der Standardwert.

closest-corner: Distanz zwischen dem Startpunkt des Strahls und der nächstgelegenen Ecke im umgebenden Block des Elements. Wenn der Startpunkt des Strahls auf einer Ecke des umgebenden Blocks liegt, ist die Länge des Liniensegments null.

farthest-side: Distanz zwischen dem Startpunkt des Strahls und der am weitesten entfernten Seite des umgebenden Blocks des Elements. Wenn der Startpunkt des Strahls außerhalb des umgebenden Blocks liegt, wird die Kante des umgebenden Blocks als unendlich betrachtet.

farthest-corner: Distanz zwischen dem Startpunkt des Strahls und der am weitesten entfernten Ecke im umgebenden Block des Elements.

sides: Distanz zwischen dem Startpunkt des Strahls und dem Punkt, an dem das Liniensegment die Grenze des umgebenden Blocks schneidet. Wenn der Startpunkt auf oder außerhalb der Grenze des umgebenden Blocks liegt, ist die Länge des Liniensegments null.

contain

Reduziert die Länge des Liniensegments so, dass das Element innerhalb des umgebenden Blocks bleibt, auch bei offset-distance: 100%. Konkret wird die Länge des Segments um die Hälfte der Breite oder Höhe des Randkastens des Elements reduziert, je nachdem, welcher Wert 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 Block platziert wird. Dies ist ein optionaler Parameter. Wenn enthalten, muss der Wert <position> dem Schlüsselwort at vorausgehen. Wenn weggelassen, wird der offset-position-Wert des Elements verwendet. Wird er weggelassen und das Element hat keinen offset-position-Wert, wird für die Startposition des Strahls offset-position: normal verwendet, was das Element im Zentrum (oder 50% 50%) des umgebenden Blocks platziert.

Die ray()-Funktion positioniert ein Element entlang eines Pfades, indem es seine Position in einem zweidimensionalen Raum durch einen Winkel und eine Entfernung von einem Referenzpunkt (Polarkoordinaten) angibt. Diese Funktionalität macht die ray()-Funktion nützlich für die Erstellung von 2D-Raumübergängen. Zum Vergleich, dieser Ansatz unterscheidet sich von der Methode, einen Punkt durch seine horizontalen und vertikalen Abstände von einem festen Ursprung (Rechteckkoordinaten) anzugeben, die von der translate()-Funktion verwendet wird, und von der Bewegung eines Elements entlang eines definierten Pfades durch eine Animation.

Da ray() im 2D-Raum arbeitet, ist es wichtig, sowohl die Anfangsposition als auch die Ausrichtung des Elements zu berücksichtigen. Wenn die ray()-Funktion als offset-path-Wert auf ein Element angewendet wird, können Sie diese Aspekte wie folgt steuern:

• Das Element wird initial positioniert, indem der offset-anchor-Punkt des Elements an die Startposition des Offsets bewegt wird. Standardmäßig wird die Startposition des Strahls durch den offset-position-Wert bestimmt. Wenn offset-position explizit als normal angegeben wird (oder weggelassen und standardmäßig auf normal gesetzt wird), wird das Element im center (oder 50% 50%) seines umgebenden Blocks positioniert. Die Angabe von offset-position: auto setzt die Startposition in die obere linke Ecke (oder 0 0) der Position des Elements.
• Das Element wird initial so rotiert, dass seine Inline-Achse — seine Textflussrichtung — mit dem durch ray() angegebenen Winkel übereinstimmt. Beispielsweise wird bei einem ray()-Winkel von 0deg, der auf der y-Achse nach oben zeigt, die Inline-Achse des Elements vertikal gedreht, um dem Winkel des Strahls zu entsprechen. Das Element behält diese Drehung entlang seines Pfades bei. Um dieses Verhalten anzupassen, verwenden Sie die offset-rotate-Eigenschaft, die es Ihnen ermöglicht, einen anderen Drehwinkel oder eine andere Richtung für das Element anzugeben, was eine genauere Kontrolle über sein Erscheinungsbild entlang des Pfades ermöglicht. Beispielsweise wird durch das Setzen von offset-rotate: 0deg jede durch ray() angewendete Drehung entfernt, wodurch die Inline-Achse des Elements wieder mit der Textflussrichtung in Einklang gebracht wird.

<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>  

Dieses Beispiel zeigt, wie man mit der Startposition eines Elements arbeitet und wie die Ausrichtung des Elements durch den angegebenen Strahlwinkel beeinflusst wird.

CSS

body {
  width: fit-content;
  height: fit-content;
}

.container {
  width: 80vw;
  height: 100px;
  border: 1px dashed black;
  margin: 0 0.5em 2em 2em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}

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

<pre>/* original */</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box0">0</div>
</div>

<pre>
  offset-path: ray(0deg);
  /* Default offset starting position is 50% 50% */
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box1">1</div>
</div>

<pre>
  offset-path: ray(150deg);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box2">2</div>
</div>

<pre>
  offset-rotate: 0deg;
  offset-position: 20% 40%;
  offset-path: ray(150deg);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box3">3</div>
</div>

<pre>
  offset-position: 0 0;
  offset-path: ray(0deg);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box4">4</div>
</div>

<pre>
  offset-path: ray(60deg closest-side at bottom right);
</pre>
<div class="container">
  <div class="box">0</div>
  <div class="box box5">5</div>
</div>

Ähnlich wie bei transform-origin ist der Standardankerpunkt im Zentrum eines Elements. Dieser Ankerpunkt kann mit der offset-anchor-Eigenschaft modifiziert werden.

In diesem Beispiel werden verschiedene offset-path: ray()-Werte auf die Kästen von 1 bis 5 angewendet. Der "umgebende Block" jedes Kastens ist mit einer gestrichelten Umrandung dargestellt. Ein verblasster Kasten in der oberen linken Ecke zeigt die Standardposition jedes Kastens ohne angewandte offset-position oder offset-path, was einen Vergleich nebeneinander ermöglicht. Die Oberseite jedes Kastens ist mit einer solid-Umrandung hervorgehoben, um Variationen in Strahlanfangspunkten und Ausrichtungen zu veranschaulichen. Nach der Positionierung am Strahlanfangspunkt richtet sich ein Kasten in die Richtung des angegebenen Strahlwinkels aus. Wenn offset-position nicht spezifiziert ist, ist die Standardstartposition des Offsets des Strahls das Zentrum (oder 50% 50%) des umgebenden Blocks des Kastens.

Ergebnis

• box1 wird initial so positioniert, dass sein Ankerpunkt (sein Zentrum) bei der Standardstartposition des Offsets (50% 50% des umgebenden Blocks) ist. box1 wird auch gedreht, um sich in Richtung des 0deg-Winkels des Strahls zu orientieren. Dies ist nun der Startpunkt des Pfads. Sie können die Veränderung der Position und der Drehung des Kastens durch den Vergleich mit dem verblassten box0 auf der linken Seite beobachten. Der Kasten wird gedreht, um den 0deg-Winkel entlang der y-Achse nach oben zu erreichen. Die Drehung des Kastens ist anhand der Orientierung der Zahl im Kasten erkennbar.

• In box2 wird ein größerer positiver Winkel von 150deg auf den Strahl angewendet, um zu zeigen, wie der Strahlwinkel funktioniert. Vom oberen linken Eckpunkt beginnend, dreht sich der Kasten im Uhrzeigersinn, um den angegebenen Winkel von 150deg zu erreichen.

• box2 und box3 haben dieselben offset-path-Werte. In box3 wird zusätzlich ein offset-rotate von 0deg auf das Element angewendet. Infolgedessen bleibt das Element während des gesamten Pfades bei diesem spezifischen Winkel gedreht, und das Element dreht sich nicht in Richtung des Pfades. Beachten Sie in box3, dass der Strahlpfad bei 150deg liegt, aber die Ausrichtung des Kastens sich entlang des Pfades nicht ändert aufgrund von offset-rotate. Beachten Sie auch, dass die offset-path-Eigenschaft von box3 keine Startposition <position> spezifiziert, sodass die Startposition des Strahls von der offset-position des Elements abgeleitet wird, die in diesem Fall top 20% left 40% ist.

• Die offset-position von box4 ist auf die obere linke Ecke (0 0) des umgebenden Blocks gesetzt, und infolgedessen fallen der Ankerpunkt des Elements und die Offsetstartposition zusammen. Der Strahlwinkel von 0deg wird an diesem Startpunkt auf das Element angewendet.

• In box5 spezifiziert die offset-path-Eigenschaft den at <position>-Wert, was den Kasten an den bottom- und right-Rand des umgebenden Blocks des Elements platziert und 60deg auf den Strahlwinkel angewendet wird.

In diesem Beispiel wird die erste Form als Referenz für ihre Position und Ausrichtung angezeigt. 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%;
  }
}

<div>
  <div class="container">
    <div class=" shape shape1">&mdash;</div>
  </div>
</div>

<pre>/* no offset-path applied */</pre>

<div>
  <div class="container">
    <div class="shape shape2">&mdash;</div>
  </div>
</div>

<pre>offset-path: ray(120deg sides contain);</pre>

<div>
  <div class="container">
    <div class="shape shape3">&mdash;</div>
  </div>
</div>

<pre>
offset-path: ray(120deg sides contain);
offset-rotate: 0deg;
</pre>

<div>
  <div class="container">
    <div class="shape shape4">&mdash;</div>
  </div>
</div>

<pre>
  offset-position: auto;
  offset-path: ray(120deg closest-corner);
</pre>

<div>
  <div class="container">
    <div class="shape shape5">&mdash;</div>
  </div>
</div>

<pre>
  offset-position: auto;
  offset-path: ray(120deg farthest-corner);
</pre>

Ergebnis

In den ersten beiden Beispielen, bei denen offset-path angewendet wird, beachten Sie die Ausrichtung der Form ohne offset-rotate und mit offset-rotate. Beide Beispiele verwenden den Standardwert offset-position normal, und deshalb beginnt die Bewegungsbahn bei 50% 50%. Die letzten beiden offset-path-Beispiele zeigen die Auswirkungen von Eckgrößenwerten <size>: closest-corner und farthest-corner. Der Wert closest-corner erzeugt einen sehr kurzen Offset-Pfad, da sich die Form bereits an der Ecke befindet (offset-position: auto). Der Wert farthest-corner erzeugt den längsten Offset-Pfad, der von der oberen linken Ecke des umgebenden Blocks zur unteren rechten Ecke verläuft.

• offset-distance
• offset-path
• offset-rotate