ray()

Параметры можно указывать в любом порядке.

<angle>

Определяет направление отрезка прямой от начальной точки смещения. Угол 0deg лежит на оси y, направленной вверх, и положительные углы увеличиваются по часовой стрелке.

<size>

Определяет длину отрезка прямой, то есть расстояние между offset-distance 0% и 100%, относительно содержащей области. Этот параметр необязателен (значение closest-side используется, если параметр <size> не указан). Он принимает следующие ключевые значения:

closest-side: Расстояние между начальной точкой луча и ближайшей стороной содержащей области элемента. Если начальная точка луча лежит на грани содержащей области, длина отрезка равна нулю. Если начальная точка луча находится вне содержащей области, грань содержащей области считается бесконечной. Это значение по умолчанию.

closest-corner: Расстояние между начальной точкой луча и ближайшей вершиной содержащей области элемента. Если начальная точка луча лежит на вершине содержащей области, длина отрезка равна нулю.

farthest-side: Расстояние между начальной точкой луча и самой дальней стороной содержащей области элемента. Если начальная точка луча находится вне содержащей области, грань содержащей области считается бесконечной.

farthest-corner: Расстояние между начальной точкой луча и самой дальней вершиной содержащей области элемента.

sides: Расстояние между начальной точкой луча и точкой пересечения отрезка прямой с границей содержащей области. Если начальная точка находится на границе или вне границы содержащей области, длина отрезка равна нулю.

contain

Уменьшает длину отрезка прямой так, чтобы элемент оставался в пределах содержащей области, даже при offset-distance: 100%. В частности, длина отрезка уменьшается на половину ширины или половину высоты области рамки элемента, в зависимости от того, что больше, и никогда не становится меньше нуля. Этот параметр необязателен.

at <position>

Определяет точку, с которой начинается луч и где элемент размещается в своей содержащей области. Этот параметр необязателен. Если указано, значение <position> должно предшествовать ключевому слову at. Если он пропущен, используется значение offset-position элемента. Если он пропущен, и у элемента нет значения offset-position, используемое значение для начальной точки луча — offset-position: normal, что размещает элемент в центре (или 50% 50%) содержащей области.

Функция ray() позиционирует элемент по траектории, указывая его расположение в двумерном пространстве с помощью угла и расстояния от опорной точки (полярные координаты). Эта функция делает функцию ray() полезной для создания 2D пространственных переходов. Для сравнения, этот подход отличается от способа задания точки по ее горизонтальному и вертикальному расстоянию от фиксированного начала (прямоугольные координаты), используемого функцией translate(), и от перемещения элемента по заданной траектории с помощью анимации.

Поскольку ray() работает в 2D пространстве, важно учитывать как начальное положение, так и ориентацию элемента. Когда функция ray() применяется как значение offset-path элемента, вот как вы можете контролировать эти аспекты:

• Элемент первоначально позиционируется путем перемещения точки offset-anchor элемента в начальную точку смещения элемента. По умолчанию начальная точка луча определяется значением offset-position. Если offset-position явно указано как normal (или опущено и оставлено по умолчанию как normal), элемент позиционируется в center (или 50% 50%) своей содержащей области. Указание offset-position: auto устанавливает начальную точку в top left углу (или 0 0) позиции элемента.
• Элемент первоначально поворачивается таким образом, что его линейная ось — направление потока текста — выравнивается с углом, указанным в ray(). Например, с углом ray() в 0deg, который лежит на оси y, направленной вверх, линейная ось элемента поворачивается вертикально, чтобы соответствовать углу луча. Элемент сохраняет этот поворот на всем пути. Чтобы настроить это поведение, используйте свойство offset-rotate, которое позволяет указать другой угол или направление поворота элемента, что даст более точный контроль над его отображением по мере следования по траектории. Например, установка offset-rotate: 0deg удалит любой поворот, примененный функцией ray(), выровняв линейную ось элемента с направлением потока текста.

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

В этом примере показано, как работать с начальной позицией элемента и как ориентация элемента изменяется в зависимости от заданного угла луча.

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

Аналогично transform-origin, по умолчанию точка привязки находится в центре элемента. Эту точку привязки можно изменить с помощью свойства offset-anchor.

В этом примере различным offset-path: ray() значениям присвоены ящики с номерами 1 по 5. «Контейнер» каждого ящика показан пунктирной линией. Выцветший ящик в верхнем левом углу отображает начальное положение каждого ящика без применения offset-position или offset-path, позволяя сравнить их бок о бок. Верхняя часть каждого ящика выделена solid линией, чтобы проиллюстрировать изменения в точках начала луча и ориентациях. После размещения в точке начала луча ящик выстраивается в направлении указанного угла луча. Если offset-position не указано, то по умолчанию начальная позиция смещения луча — это центр (или 50% 50%) контейнера ящика.

Результат

• box1 изначально позиционируется так, что его точка привязки (его центр) находится в точке начального смещения (50% 50% контейнера). box1 также поворачивается, чтобы выровнять его по углу 0deg луча. Это будет начальной точкой пути. Вы можете наблюдать изменения положения и поворота ящика, сравнивая его с выцветшим box0 слева. Ящик поворачивается, чтобы соответствовать углу 0deg по оси Y, направляясь вверх. Поворот ящика заметен по ориентации числа внутри него.

• В box2, для луча применяется больший положительный угол 150deg, чтобы показать, как работает угол луча. Начав с верхнего левого угла, ящик поворачивается по часовой стрелке, чтобы достичь заданного угла 150deg.

• box2 и box3 имеют одинаковые значения offset-path. В box3, также применяется значение offset-rotate 0deg. В результате элемент будет оставаться повернутым под этим углом на всем пути луча, и элемент не будет поворачиваться в направлении пути. Обратите внимание в box3, что путь луча находится под углом 150deg, но ориентация ящика не изменится вдоль пути из-за offset-rotate. Также обратите внимание, что свойство offset-path для box3 не указывает начальную <position>, поэтому начальная позиция луча определяется по offset-position элемента, которая в данном случае равна top 20% left 40%.

• offset-position для box4 установлено в верхний левый угол (0 0 контейнера), и в результате точка привязки элемента и начальная позиция смещения совпадают. К элементу в этой начальной точке применён угол луча 0deg.

• В box5, свойство offset-path указывает значение at <position>, что помещает ящик в bottom и right край контейнера элемента, и 60deg применён к углу луча.

В этом примере первая фигура показана в качестве справки для её положения и ориентации. Путь движения луча применён к другим фигурам.

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

Результат

В первых двух примерах, где применяется offset-path, обратите внимание на ориентацию фигуры без offset-rotate и с offset-rotate. Оба этих примера используют значение по умолчанию для offset-position normal, а значит, движение по пути начинается с 50% 50%. Последние два offset-path примера демонстрируют влияние значений <size> углов: closest-corner и farthest-corner. Значение closest-corner создаёт очень короткий смещённый путь, так как фигура уже находится в углу (offset-position: auto). Значение farthest-corner создаёт самый длинный смещённый путь, проходящий от верхнего левого угла контейнера до нижнего правого.

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