1. Web
  2. CSS
  3. Reference
  4. Values
  5. ray()

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CSS-Funktion ray()

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2024 browserübergreifend verfügbar.

Die CSS-Funktion ray() definiert das Liniensegment für offset-path, dem ein animiertes Element folgen kann. Dieses Liniensegment wird als „Strahl“ bezeichnet. Der Strahl beginnt an einer offset-position und erstreckt sich in Richtung des angegebenen Winkels. Die Länge eines Strahls kann durch Angabe einer Größe und Verwendung des Schlüsselworts contain begrenzt werden.

Syntax

css
/* 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 Offset-Startposition aus erstreckt. Der Winkel 0deg liegt auf der nach oben gerichteten y-Achse; positive Winkel nehmen im Uhrzeigersinn zu.

<size>

Gibt die Länge des Liniensegments an, also den Abstand zwischen offset-distance 0% und 100% relativ zum umschließenden Kasten. Dieser Parameter ist optional (wenn kein <size> angegeben wird, gilt closest-side). Er akzeptiert einen der folgenden Schlüsselwortwerte:

closest-side: Abstand zwischen dem Startpunkt des Strahls und der nächstgelegenen Seite des umschließenden Blocks des Elements. Liegt der Startpunkt des Strahls auf einer Kante des umschließenden Blocks, beträgt die Länge des Liniensegments null. Liegt er außerhalb des umschließenden Blocks, wird dessen Kante als bis ins Unendliche verlängert betrachtet. Dies ist der Standardwert.

closest-corner: Abstand zwischen dem Startpunkt des Strahls und der nächstgelegenen Ecke im umschließenden Block des Elements. Liegt der Startpunkt auf einer Ecke des umschließenden Blocks, beträgt die Länge des Liniensegments null.

farthest-side: Abstand zwischen dem Startpunkt des Strahls und der am weitesten entfernten Seite des umschließenden Blocks des Elements. Liegt der Startpunkt außerhalb des umschließenden Blocks, wird dessen Kante als bis ins Unendliche verlängert betrachtet.

farthest-corner: Abstand zwischen dem Startpunkt des Strahls und der am weitesten entfernten Ecke im umschließenden Block des Elements.

sides: Abstand zwischen dem Startpunkt des Strahls und dem Punkt, an dem das Liniensegment die Begrenzung des umschließenden Blocks schneidet. Liegt der Startpunkt auf oder außerhalb dieser Begrenzung, beträgt die Länge des Liniensegments null.

contain

Verkürzt das Liniensegment so, dass das Element selbst bei offset-distance: 100% innerhalb des umschließenden Blocks bleibt. Konkret wird die Länge des Segments um die Hälfte der Breite oder die Hälfte der Höhe der Border-Box des Elements verkürzt, je nachdem, welcher Wert größer ist. Sie wird dabei niemals kleiner als null. Dieser Parameter ist optional.

at <position>

Gibt den Punkt an, an dem der Strahl beginnt und an dem das Element innerhalb seines umschließenden Blocks platziert wird. Dieser Parameter ist optional. Wird er angegeben, muss dem Wert <position> das Schlüsselwort at vorangestellt werden. Wird er weggelassen, wird der offset-position-Wert des Elements verwendet. Wird er weggelassen und hat das Element keinen offset-position-Wert, wird für die Startposition des Strahls offset-position: normal verwendet. Dadurch wird das Element in der Mitte (also bei 50% 50%) des umschließenden Blocks platziert.

Beschreibung

Die Funktion ray() positioniert ein Element entlang eines Pfads, indem sie dessen Position im zweidimensionalen Raum durch einen Winkel und einen Abstand zu einem Bezugspunkt angibt (Polarkoordinaten). Dadurch eignet sich ray() für zweidimensionale räumliche Übergänge. Dieser Ansatz unterscheidet sich sowohl von der Angabe eines Punkts anhand seiner horizontalen und vertikalen Abstände zu einem festen Ursprung (kartesische Koordinaten), wie sie die Funktion translate() verwendet, als auch von der Bewegung eines Elements entlang eines definierten Pfads mittels Animation.

Da ray() im zweidimensionalen Raum arbeitet, müssen sowohl die Ausgangsposition als auch die Ausrichtung des Elements berücksichtigt werden. Wenn ray() als Wert für offset-path auf ein Element angewendet wird, können Sie diese Aspekte wie folgt steuern:

  • Das Element wird zunächst positioniert, indem sein offset-anchor-Punkt an die Offset-Startposition des Elements verschoben wird. Standardmäßig bestimmt der Wert von offset-position die Startposition des Strahls. Wenn offset-position ausdrücklich auf normal gesetzt wird (oder weggelassen wird und deshalb standardmäßig normal gilt), wird das Element in der Mitte (center beziehungsweise 50% 50%) seines umschließenden Blocks positioniert. Mit offset-position: auto wird die Startposition auf die obere linke Ecke (top left beziehungsweise 0 0) der Position des Elements gesetzt.
  • Das Element wird zunächst so gedreht, dass seine Inline-Achse – die Richtung des Textflusses – mit dem durch ray() angegebenen Winkel übereinstimmt. Bei einem ray()-Winkel von 0deg, der auf der nach oben gerichteten y-Achse liegt, wird die Inline-Achse des Elements beispielsweise vertikal ausgerichtet. Das Element behält diese Drehung entlang des gesamten Pfads bei. Mit der Eigenschaft offset-rotate können Sie stattdessen einen anderen Drehwinkel oder eine andere Drehrichtung angeben und so das Erscheinungsbild des Elements entlang des Pfads genauer steuern. Wenn Sie beispielsweise offset-rotate: 0deg setzen, wird eine durch ray() bewirkte Drehung aufgehoben und die Inline-Achse des Elements wieder an der Richtung des Textflusses ausgerichtet.

Formale Syntax

<ray()> = 
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )  

<ray-size> = 
  <radial-extent>  |
  sides            

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Winkel und Startposition eines Strahls festlegen

Dieses Beispiel zeigt, wie Sie die Startposition eines Elements festlegen und wie sich der angegebene Strahlwinkel auf seine Ausrichtung auswirkt.

CSS

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 Ankerpunkt standardmäßig in der Mitte eines Elements. Mit der Eigenschaft offset-anchor können Sie diesen Ankerpunkt ändern.

In diesem Beispiel werden verschiedene Werte für offset-path: ray() auf die mit 1 bis 5 nummerierten Boxen angewendet. Der „umschließende Block“ jeder Box ist durch einen gestrichelten Rahmen dargestellt. Eine verblasste Box oben links zeigt die Standardposition jeder Box ohne offset-position oder offset-path und ermöglicht so einen direkten Vergleich. Die Oberseite jeder Box ist durch einen solid-Rahmen hervorgehoben, um Unterschiede bei den Startpunkten und Ausrichtungen der Strahlen zu veranschaulichen. Nach der Positionierung am Startpunkt des Strahls wird eine Box in Richtung des angegebenen Strahlwinkels ausgerichtet. Wenn offset-position nicht angegeben ist, liegt die standardmäßige Offset-Startposition des Strahls in der Mitte (bei 50% 50%) des umschließenden Blocks der Box.

Ergebnis

  • box1 wird zunächst so positioniert, dass ihr Ankerpunkt (ihre Mitte) an der standardmäßigen Offset-Startposition liegt (50% 50% des umschließenden Blocks). Außerdem wird box1 in Richtung des Strahlwinkels von 0deg gedreht. Dies ist nun der Startpunkt des Pfads. Die Änderung von Position und Drehung können Sie erkennen, indem Sie die Box mit der verblassten box0 links vergleichen. Die Box ist entsprechend dem nach oben gerichteten Winkel 0deg entlang der y-Achse gedreht. Die Drehung ist an der Ausrichtung der Zahl in der Box zu erkennen.

  • Bei box2 wird ein größerer positiver Winkel von 150deg auf den Strahl angewendet, um die Wirkung des Strahlwinkels zu zeigen. Ausgehend von der oberen linken Ecke wird die Box im Uhrzeigersinn gedreht, bis der angegebene Winkel von 150deg erreicht ist.

  • box2 und box3 haben dieselben offset-path-Werte. Bei box3 wird zusätzlich ein offset-rotate-Wert von 0deg auf das Element angewendet. Dadurch behält das Element entlang des gesamten Strahlpfads genau diese Ausrichtung bei und dreht sich nicht in die Richtung des Pfads. Beachten Sie bei box3, dass der Strahlpfad zwar einen Winkel von 150deg hat, die Ausrichtung der Box sich entlang des Pfads wegen offset-rotate aber nicht ändert. Beachten Sie außerdem, dass die Eigenschaft offset-path von box3 keine Startposition <position> angibt. Die Startposition des Strahls wird daher aus dem offset-position-Wert des Elements abgeleitet, der hier top 20% left 40% beträgt.

  • offset-position von box4 ist auf die obere linke Ecke (0 0) des umschließenden Blocks gesetzt. Dadurch fallen der Ankerpunkt des Elements und die Offset-Startposition zusammen. An diesem Startpunkt wird der Strahlwinkel 0deg auf das Element angewendet.

  • Bei box5 gibt die Eigenschaft offset-path den Wert at <position> an. Dadurch wird die Box am unteren (bottom) und rechten (right) Rand des umschließenden Blocks des Elements platziert; der Strahlwinkel beträgt 60deg.

Ein Element entlang des Strahls animieren

In diesem Beispiel dient die erste Form als Referenz für Position und Ausrichtung. Auf die anderen Formen wird ein Strahl als Bewegungspfad angewendet.

CSS

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

Beachten Sie bei den ersten beiden Beispielen mit offset-path die Ausrichtung der Form ohne und mit offset-rotate. Beide verwenden den Standardwert normal für offset-position; die Bewegung entlang des Pfads beginnt daher bei 50% 50%. Die letzten beiden Beispiele mit offset-path zeigen die Wirkung der eckenbezogenen <size>-Werte closest-corner und farthest-corner. Der Wert closest-corner erzeugt einen sehr kurzen offset-path, da sich die Form bereits an der Ecke befindet (offset-position: auto). Der Wert farthest-corner erzeugt den längsten offset-path, der von der oberen linken zur unteren rechten Ecke des umschließenden Blocks verläuft.

Spezifikationen

Spezifikation
Motion Path Module Level 1
# funcdef-ray

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden