motion-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>Motion Path Module Level 1 （日本語訳）</title>

<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-css.css" type="text/css">

<style>
img {
	background: white;
}
</style>

<script src="common0.js" ></script>
<script src="common1.js" async></script>

<script>
Util.ready = function(){
	const source_data = {
		toc_main: 'MAIN0',
		generate: expand
	};
	Util.switchWordsInit(source_data);
}

function expand(){

	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	return this.html.replace(
		/%[~\w\-一-鿆あ-ん]+|`(.+?)([$@\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){

if(!key) { //%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `#biblio-${key.toLowerCase()}`;
	break;
case 'tp':
	text = `&lt;'<code class="property">${key}</code>'&gt;`;
	href = link_map[`p.${key}`];
	break;
case 't':
	text = `&lt;${key}&gt;`;
	break;
case 'f':
	text = `${key}()`;
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'dgm':
	return `<a id="_dgm-${key}">＊</a>`;
	break;
case 'issue':
	href = `~FXTFissue/${key}`;
	text = `課題 #${key}`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}
return text;

	}
}
</script>

<script type="text/plain" id="_source_data">


●●options

spec_title:Motion Path Module Level 1
spec_date:2024-11-05
trans_update:2024-08-11
source_checked:230801
page_state_key:CSS
original_url:https://drafts.fxtf.org/motion-1/
	abbr_url:MOTION1
spec_status:WD
ref_id_prefix:biblio-
ref_id_lowercase:true
site_nav:transform,css-anim,svg
conformance:css
copyright:2024,permissive
trans_1st_pub:2023-09-22


●●class_map
p:css
css:css
v:value
f:func
t:type
e:element

●●tag_map
p:code
css:code
c:code
t:var
f:code
e:code
i:i
css:code
v:code
pC:i

●●words_table1
CSSSHAPES2:css-shapes2-ja.html
FXTFissue:https://github.com/w3c/fxtf-drafts/issues
autoP:auto
autoA:auto
autoR:auto


●●words_table

	●幾何
motion::::モーション
変形-:transform::~
変形:transform::~
変形n:transformation::変形
回転-:rotate::~
回転:rotation::~
	$p:scale
並進:translation::~
並進-:translate::~
交差-:intersect::~
横:horizontal::~
縦:vertical::~
線:line::~
射線:ray::~
延伸-:extend::~
区分:segment::~
隅:corner::~
丸めら:roundさ:~
点:point::~
始点:starting point::~
	始点:beginning
	始点:begin
側:side:~
極-:polar::~
反時計回り:anticlockwise:~
時計回り:clockwise:~
限界域:bounds::~
図形:shape::~
	~~図形:figure
真円:circle::~
楕円:ellipse::~
円弧:circular arc::~
矩形:rectangle::~
矩形な:rectangular::~
多角形:polygon::~
中心:center::~
幾何的:geometrical:~
二次元:2-dimensional::~
	二次元:2d::~
閉な:closed:閉じた
開な:unclosed:開いた
	開な~path:unclosed intervals
closepath::path を close する:path を閉じる:パスを閉じる
方角:bearing:~
勾配:gradient:~
外形線:outline::~
曲な:curving:曲がった
真直な:straight:まっすぐな

	$e:Path
	$e:circle
	$e:ellipse
	$e:image
	$e:polygon
	$e:rect
	$e:polyline
	$e:line

	~path:interval
	最も近い:closest
	最も遠い:farthest
	伸びる:going
	外側にある:outside its bounds entirely
	周辺近く:around the edge of
	左上:top left
	左上:top-left
	最も右:rightmost
	原点:origin point
	下位-~path:sub-path
	左端:left end
	^v:right bottom
	射線$:&lt;angle&gt; path
	半分:half
	大きい方:larger
	ほぼ等しい:equal or nearly so
	°:degrees
	度数:amount of degree
	無限に:to infinity
	きっちりはまるよう:fairly snugly against
	居続ける:stay
	出ている:emerging
	各~位置／いくつかの位置:different positions
	開始~時の:starting
	終了~時の:ending
	空間~上で:spatial
	位置し直:reposition
	周り:around
	なぞれる:trace out
	-:diverges from straight rightward
	-:quarter
	`contain$v を伴わない:unbounded
	反対:opposite
	真上を指す:pointing up
	縦横とも~size 0 の:0x0
	尖った:sharp

	●CSS
積層:stacking::~
基準box:reference box::基準 box:基準ボックス
gradient:

	下位prop:longhand properties
	~~基準に:against
	~~基準に:refer

	●構文／直列化
	後続-:follow

	●処理
換算-:convert:~

	`min^op／-:clamped

	●仕様
保つ:keepする:~
保たれ:keepされ:~
妨害-:disrupt:~
比較的:relativeに:~
併合-:merge:~
訂正:correction:~

	今の所は:for now
	利用している:consumer
	為され:made
	アリ性:possibilities
	書き直す:rewritten
	書き直した:rewrote
	言い換えた:reword
	さほど〜ない:quite as
	一式の:suite
	保たれ:kept
	`css-shapes$r:Shapes
	ことを除けば:just
	依存しない:is constant regardless of
	自前の節:appendix
	編成し直:reorganize
	下位節:subsection

	●例
増幅-:amplify:~
	丸い時計の文字盤:round clock face
	文字盤:clock face
	絵図:picture
	破線:dotted line
	破線:dotted
	飛行機:airplane
	飛行機:plane
	赤い丸:red dot
	真中にある:in the middle
	黒い:black
	（青い破線）:blue dotted
	が進む〜向く:face

	●未分類
行列:matrix::~
数学的:mathematical:~
最終-:final:~
固定的:fixed:~
構成-:compose:~

	法とする剰余:modulo
	0 以上:non-negative
	総-:total:~
	離れていく:exploded away
	-:beautiful
	-:proceed
	%X
	成す:makes up
	適用される:layered

●●original_id_map


●●mdn_urls
propdef-offset:CSS/offset
propdef-offset-anchor:CSS/offset-anchor
propdef-offset-path:CSS/offset-path
propdef-offset-distance:CSS/offset-distance
propdef-offset-rotate:CSS/offset-rotate
propdef-offset-position:CSS/offset-position


●●link_map

	●p, t, f, v
p.offset:#propdef-offset
p.offset-anchor:#propdef-offset-anchor
p.offset-path:#propdef-offset-path
p.offset-distance:#propdef-offset-distance
p.offset-rotate:#propdef-offset-rotate
p.offset-position:#propdef-offset-position
p.left:~CSSPOS#propdef-left
p.top:~CSSPOS#propdef-top
p.position:~CSSPOS#propdef-position
p.transform-origin:~TRANSFORM#propdef-transform-origin
p.transform:~TRANSFORM#propdef-transform
p.translate:~TRANSFORM2#propdef-translate
p.rotate:~TRANSFORM2#propdef-rotate
p.scale:~TRANSFORM2#propdef-scale
p.border-radius:~CSSBG#propdef-border-radius
	p.contain:~CSSCONTAIN#propdef-contain

t.offset-path:#typedef-offset-path
t.ray-size:#typedef-ray-size

t.path():#path-equivalent-path
t.shape():#shape-equivalent-path
t.circle():#circle-equivalent-path
t.ellipse():#ellipse-equivalent-path
t.polygon():#polygon-equivalent-path
t.ray():#funcdef-ray


t.basic-shape:~CSSSHAPES#typedef-basic-shape
t.coord-box:~CSSBOX#typedef-coord-box
t.offset-path:#typedef-offset-path
t.url:~CSSVAL#url-value
t.angle:~CSSVAL#angle-value
t.ray-size:#typedef-ray-size
	t.rg-size:~CSSIMAGE#typedef-rg-size
	廃）t.size:~TR/css-images-3/#typedef-size
t.position:~CSSVAL#typedef-position
t.length-percentage:~CSSVAL#typedef-length-percentage
t.geometry-box:~MASKING1#typedef-geometry-box

f.ray:#funcdef-ray

f.shape:~CSSSHAPES2#funcdef-shape
f.path:~CSSSHAPES#funcdef-basic-shape-path
f.circle:~CSSSHAPES#funcdef-basic-shape-circle
f.ellipse:~CSSSHAPES#funcdef-basic-shape-ellipse
f.rect:~CSSSHAPES#funcdef-basic-shape-rect
f.inset:~CSSSHAPES#funcdef-basic-shape-inset
f.xywh:~CSSSHAPES#funcdef-basic-shape-xywh
f.polygon:~CSSSHAPES#funcdef-basic-shape-polygon

	f.rect:#rect-equivalent-path
	f.inset:#inset-equivalent-path
	f.xywh:#xywh-equivalent-path
	f.path:~CSSSHAPES#funcdef-basic-shape-path
	f.circle:~CSSSHAPES#funcdef-basic-shape-circle
	f.ellipse:~CSSSHAPES#funcdef-basic-shape-ellipse
	f.polygon:~CSSSHAPES#funcdef-basic-shape-polygon

f.translate:~TRANSFORM#funcdef-transform-translate

v.none:#valdef-offset-path-none
	#valdef-offset-path-offset-path--coord-box
	#valdef-offset-path-ray
	#valdef-offset-path-url
	#valdef-offset-path-basic-shape
	#valdef-offset-path-coord-box

v.contain:#valdef-ray-contain
	#valdef-ray-angle
	#valdef-ray-ray-size
	#valdef-ray-at-position
v.closest-side:#size-closest-side
v.closest-corner:#size-closest-corner
v.farthest-side:#size-farthest-side
v.farthest-corner:#size-farthest-corner
v.sides:#size-sides

v.~autoA:#valdef-offset-anchor-auto
	#valdef-offset-anchor-position

v.normal:#valdef-offset-position-normal
v.~autoP:#valdef-offset-position-auto
	#valdef-offset-position-position

v.reverse:#valdef-offset-rotate-reverse
v.~autoR:#valdef-offset-rotate-auto
	#valdef-offset-rotate-angle

v.inherit:~CASCADE#valdef-all-inherit
v.initial:~CASCADE#valdef-all-initial
v.static:~CSSPOS#valdef-position-static
v.view-box:~CSSBOX#valdef-box-view-box

e.path:~SVGpaths#elementdef-path
e.circle:~SVGshapes#elementdef-circle
e.ellipse:~SVGshapes#elementdef-ellipse
e.image:~SVGembedded#elementdef-image
e.polygon:~SVGshapes#elementdef-polygon
e.rect:~SVGshapes#elementdef-rect
e.line:~SVGshapes#elementdef-line
e.polyline:~SVGshapes#elementdef-polyline

	●用語
射線:#_ray
~offset変形:#offset-transform
~offset~path:#offset-path

射線の原点:#ray-origin
等価な~path:#basic-shape-equivalent-path
開始~時の~offset位置:#offset-starting-position
~offsetを開始する位置:#offset-starting-position

使用~offset距離:#used-offset-distance
~offset位置:#offset-position
~offset距離:#offset-distance
総-長さ:#total-length
~anchor点:#offset-anchor-point


	●CSS
算出d値:~CASCADE#computed-value
積層~文脈:~CSS2J#stacking-context
	積層~文脈:~TR/CSS21/visuren.html#x43
~box:~CSSDISP#box
包含塊:~CSSDISP#containing-block
首要~box:~CSSDISP#principal-box
基準box:~CSSSHAPES#basic-shape-reference-box
変形-可能な要素:~TRANSFORM#transformable-element
~gradient関数:~CSSIMAGE4#gradient-function


	●SVG
pC.~closepath:~SVGpaths#PathDataClosePathCommand

区分を完了して~pathを閉じる:~SVGpaths#TermSegment-CompletingClosePath
図形~要素:~SVGshapes#TermShapeElement
0.等価な~path:~SVGpaths#TermEquivalentPath
~pathの方向:~SVGpaths#TermPathDirection
表示域~座標系:~SVGcoords#TermViewportCoordinateSystem
利用元~座標系:~SVGcoords#TermUserCoordinateSystem
	利用元~座標系:~TRANSFORM#user-coordinate-system

●●images
＠motion/
offset-rotate-none｜height:120px｜Path without rotation｜.svg
geometry-box｜height:270px｜An image of example for geometry-box with border-radius｜.svg
increase-size｜height:335px｜An image of an increased path size｜.svg
initial-outside｜height:460px｜An image with initial position outside the containing block｜.svg
motion-path｜height:120px｜Example Path｜.svg
normal-flow｜height:324px｜Normal flow determining circle center｜.svg
offset_anchor_auto｜height:570px｜An example of offset-anchor: auto｜.svg
offset_anchor_center｜height:790px｜An example of offset-anchor: center｜.svg
offset_anchor｜height:300px｜An example of offset-anchor｜.png
offset_distance_with_contain｜height:220px｜An image of boxes positioned with contain｜.png
offset_distance_without_contain｜height:240px;｜An image of boxes positioned without contain｜.png
offset_position_auto｜height:320px｜An image of offset-position: auto｜.png
offset-distance-closed｜height:270px｜An example of boxes placed along a closed interval｜.svg
offset-distance-unclosed｜height:270px｜An example of boxes placed along an unclosed interval｜.svg
offset-initial｜height:120px｜Path without offset｜.svg
offset-rotate-45｜height:120px｜Path with fixed rotation｜.svg
offset-rotate-auto｜height:120px｜Path with auto rotation｜.svg
offset-rotate-reverse｜height:120px｜Path with reverse auto rotation｜.svg
plane｜height:140px｜Shape with its anchor point｜.svg
position-absolute｜height:430px｜An example when offset-position is ignored｜.svg
position-scale｜height:304px｜An example when motion path and scale interact｜.svg
position-transform｜height:350px｜An example when motion path and other transforms interact｜.svg
rotate_by_angle_with_auto｜height:250px｜An image of example for offset-rotate｜.png
simple_offset_position｜height:300px｜An image of three boxes positioned to polar coordinates｜.png

●●ref_key_map

●●ref_normative

[CSS-BACKGROUNDS-3]
    Elika Etemad; Brad Kemper. ＜CSS Backgrounds and Borders Module Level 3＞. 11 March 2024. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-BOX-3]
    Elika Etemad. ＜CSS Box Model Module Level 3＞. 11 April 2024. REC. URL: https://www.w3.org/TR/css-box-3/
[CSS-BOX-4]
    Elika Etemad. ＜CSS Box Model Module Level 4＞. 4 August 2024. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-CASCADE-5]
    Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. ＜CSS Cascading and Inheritance Level 5＞. 13 January 2022. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-CONTAIN-2]
    Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. ＜CSS Containment Module Level 2＞. 17 September 2022. WD. URL: https://www.w3.org/TR/css-contain-2/
[CSS-DISPLAY-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Display Module Level 3＞. 30 March 2023. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-IMAGES-4]
    Tab Atkins Jr.; Elika Etemad; Lea Verou. ＜CSS Images Module Level 4＞. 17 February 2023. WD. URL: https://www.w3.org/TR/css-images-4/
[CSS-SHAPES]
    Rossen Atanassov; Alan Stearns. ＜CSS Shapes Module Level 1＞. 15 November 2022. CR. URL: https://www.w3.org/TR/css-shapes-1/
[CSS-SHAPES-2]
    ＜CSS Shapes Module Level 2＞. Editor's Draft. URL: https://drafts.csswg.org/css-shapes-2/
[CSS-TRANSFORMS-1]
    Simon Fraser; et al. ＜CSS Transforms Module Level 1＞. 14 February 2019. CR. URL: https://www.w3.org/TR/css-transforms-1/
[CSS-TRANSFORMS-2]
    Tab Atkins Jr.; et al. ＜CSS Transforms Module Level 2＞. 9 November 2021. WD. URL: https://www.w3.org/TR/css-transforms-2/
[CSS-VALUES-4]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 4＞. 12 March 2024. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-VALUES-5]
    Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. ＜CSS Values and Units Module Level 5＞. 17 September 2024. WD. URL: https://www.w3.org/TR/css-values-5/
[CSS21]
    Bert Bos; et al. ＜Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification＞. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS21/
[CSS3VAL]
    Tab Atkins Jr.; Elika Etemad. ＜CSS Values and Units Module Level 3＞. 22 March 2024. CR. URL: https://www.w3.org/TR/css-values-3/
[RFC2119]
    S. Bradner. ＜Key words for use in RFCs to Indicate Requirement Levels＞. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SVG11]
    Erik Dahlström; et al. ＜Scalable Vector Graphics (SVG) 1.1 (Second Edition)＞. 16 August 2011. REC. URL: https://www.w3.org/TR/SVG11/
[SVG2]
    Amelia Bellamy-Royds; et al. ＜Scalable Vector Graphics (SVG) 2＞. 4 October 2018. CR. URL: https://www.w3.org/TR/SVG2/

●●ref_informative

[CSS-MASKING-1]
    Dirk Schulze; Brian Birtles; Tab Atkins Jr.. ＜CSS Masking Module Level 1＞. 5 August 2021. CR. URL: https://www.w3.org/TR/css-masking-1/
[CSS-POSITION-3]
    Elika Etemad; Tab Atkins Jr.. ＜CSS Positioned Layout Module Level 3＞. 10 August 2024. WD. URL: https://www.w3.org/TR/css-position-3/
[CSS-ROUND-DISPLAY-1]
    Jihye Hong. ＜CSS Round Display Level 1＞. 22 December 2016. WD. URL: https://www.w3.org/TR/css-round-display-1/
[MOTION-1]
    Dirk Schulze; et al. ＜Motion Path Module Level 1＞. 18 December 2018. WD. URL: https://www.w3.org/TR/motion-1/


●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより作業草案として公開された
<a href="~SPEC_URL">Motion Path Module Level 1</a>
を日本語に翻訳したものです。
~PUB
</p>

●●spec_metadata

最新公表バージョン
	https://www.w3.org/TR/motion-1/
公表履歴
	https://www.w3.org/standards/history/motion-1/
フィードバック
	https://github.com/w3c/fxtf-drafts/labels/motion-1
テスト一式
	https://github.com/web-platform-tests/wpt/tree/master/css/motion
	https://wpt.fyi/results/css/motion/
編集
	<a href="mailto:dschulze@adobe.com">Dirk Schulze</a> (Adobe Inc.)
	<a href="mailto:jihye@igalia.com">Jihye Hong</a> (Igalia)
	<a href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google)
前任編集者
	<a href="mailto:shanestephens@google.com">Shane Stephens</a> (Google)
	<a href="mailto:ericwilligers@google.com">Eric Willigers</a> (then Google)
課題追跡
	<a href="https://github.com/w3c/fxtf-drafts/labels/motion-1">GitHub Issues</a>
Suggest an Edit for this Spec
	<a href="https://github.com/w3c/fxtf-drafts/blob/main/motion-1/Overview.bs">GitHub Editor</a>

commit 履歴
	https://github.com/w3c/fxtf-drafts/commits/main/motion-1


</script>

</head>
<body>
<header>
	<hgroup>
<h1>モーションパス — Motion Path Module Level 1</h1>
	</hgroup>
</header>

<div id="MAIN" hidden>

	<section id="abstract">
◎要約

<p>
~motion~pathは、
作者が指定した~path上で~graphicな~objを［
位置する／~animateする
］ことを作者に許容する。
◎
Motion path allows authors to position any graphical object and animate it along an author specified path.
</p>

	</section>
	<section id="sotd">
◎位置付け

<p>
この節では、
公表~時点における…
【以下，この節の他の内容は、~SOTD-W3Cに移譲。】
</p>

	</section>

<main id="MAIN0">

	<section id="intro">
<h2 title="Introduction">1. 序論</h2>

◎非規範的

<p>
`transform$p ~propと それに関係する各~propは、
`~box$を それが~lay-outされた位置から相対的に，
任意に位置し直す（回転する, 拡縮する, 等々）ことを許容する
— 当の~page上の他の要素の~layoutを妨害することなく。
これらの位置は，~CSSで［
~animateできる／遷移できる
］が、
比較的~単純な仕方
— ~boxを その開始~時の位置から終了~時の位置へ真直な線~内で移動すること —
に限られていた。
◎
The transform property and its related properties allow a box to be arbitrarily repositioned (and rotated, scaled, etc) relative to its laid out position, without disrupting the layout of any other elements on the page. These positions can be animated or transitioned with CSS, but only in relatively simple ways: moving a box in a straight line from its starting position to its ending position.
</p>

<p>
この仕様は、
`~offset変形$を定義するための一式の~prop
— `offset$p 略式, その下位propたち —
を導入する。
`~offset変形@
は、
要素~上の特定0の点（ `offset-anchor$p ）を
ある`~path^em（ `offset-path$p ）上の
`~offset位置@
（ `offset-distance$p ）に整列することに加え，
任意選択で要素を~path方向に従うよう回転する（ `offset-rotate$p ）変形である。
◎
This specification introduces the offset shorthand, and its suite of associated longhand properties, which define an offset transform: a transform which aligns a particular point on an element (offset-anchor) to an offset position on a path (offset-path and offset-distance), and optionally rotates it to follow the path direction (offset-rotate).
</p>

<p>
これは、
いくつかの強力な変形のアリ性を新たに許容する
— 極-座標を利用して位置したり
（ `translate$f 関数により利用される標準な矩形な座標ではなく， `ray$f 関数で），
`定義された~path^emに沿って要素を~animateすることで，二次元~空間~上で複階的な遷移を容易に定義できるようにする。
◎
This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the ray() function) rather than the standard rectangular coordinates used by the translate() function, or animating an element along a defined path, making it easy to define complex and beautiful 2d spatial transitions.
</p>

<div class="example">
<p>
例えば，次の絵図は、
曲な~path（破線で指示される）と~pathに沿って様々な点に位置された飛行機~graphicを示す。
飛行機は、
~path上の各~位置にて，~pathが進む方向を向く。
◎
For example, the following picture shows a curving path (indicated with dotted lines), and an airplane graphic positioned at various points along the path. The plane faces in the direction of the path at each position on the path.
</p>
<figure>
`motion-path^dgm
<p class="caption">
`offset-distance$p の異なる値たち
— `0%^v, `50%^v, `100%^v —
に対応する所に示された飛行機。
◎
The plane is shown at different offset-distance values: 0%, 50%, and 100%.
</p></figure>
</div>

		<section id="placement">
<h3 title="Module interactions">1.1. ~module間の相互作用</h3>

<p>
この仕様は、
要素に適用できる変形（ `CSS-TRANSFORMS-1$r ）として，
追加的な型を定義する。
◎
This specification defines additional types of transforms (see [css-transforms-1]) that can be applied to an element.
</p>

<p>
この文書により定義される変形は、
`CSS-TRANSFORMS-2$r `§ 現在の変形~行列＠~TRANSFORM2#ctm$
にて述べられるとおり，個々の変形~prop
— `translate$p, `rotate$p, `scale$p （ `CSS-TRANSFORMS-2$r ） —
より後かつ
`transform$p ~prop（ `CSS-TRANSFORMS-1$r ）
より前に適用される。
◎
As described in CSS Transforms 2 § 6 Current Transformation Matrix, the transforms defined by this document are layered after the individual transform properties (translate/rotate/scale, defined in [css-transforms-2]) and before the transform property (defined in [css-transforms-1]).
</p>

		</section>
		<section id="values">
<h3 title="Values">1.2. 値</h3>

<p>
`basic-shape$t 型は `CSS-SHAPES$r にて定義される。
`coord-box$t 型は `CSS-BOX-3$r にて定義される。
◎
This specification follows the CSS property definition conventions from [CSS21]. The &lt;basic-shape&gt; type is defined in CSS Shapes Module Level 1 [CSS-SHAPES]. The &lt;coord-box&gt; type is defined in CSS Box Model Module Level 3 [CSS-BOX-3].＼
</p>

<p class="trans-note">【
以下、
この節の内容は `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。
】
◎
Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 [CSS3VAL].
◎
In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as initial and inherit as their property value [CSS3VAL]. For readability it has not been repeated explicitly.
</p>

		</section>
	</section>
	<section id="motion-paths-overview">
<h2 title="Motion Paths">2. ~motion~path</h2>

		<section id="offset-path-property">
<h3 title="Defining A Path: the offset-path property">2.1. ~pathの定義-法： `offset-path^p ~prop</h3>

◎名 `offset-path@p
◎値 `none^v | `offset-path$t || `coord-box$t
◎初 `none^v
◎適 `変形-可能な要素$
◎継 されない
◎百 受容しない
◎算 指定されたとおおり
◎順 文法に従う
◎ア 算出された値~型による
◎表終

<p>
`~offset~path@
を指定する
— それは，幾何的な~pathであり、
~boxは，その`~anchor点$がその上に乗るよう位置される。
◎
Specifies the offset path, a geometrical path the box gets positioned on.
</p>

<pre class="prod">
`offset-path@t
	= `ray()$t
	| `url$t
	| `basic-shape$t
</pre>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`none@v</dt>
	<dd>
要素は、
`~offset変形$を有さない。
◎
The element does not have an offset transform.
</dd>

	<dt id="valdef-offset-path-offset-path--coord-box">`offset-path$t</dt>
	<dd>
要素は、
ある`~offset~path$により定義される`~offset変形$を有する。
`~offset変形$を計算する方法についての詳細は、
`§ ~offset変形の計算-法＠#transform$
を見よ。
◎
The element has an offset transform, defined by some offset path. See § 2.7 Calculating The Offset Transform for details on how to calculate the offset transform.
</dd>
	<dd>
`transform$p を有することによる通例の効果（`積層~文脈$を作成する，等々）は、
すべて適用される
— 詳細は、
`CSS-TRANSFORMS-1$r
`§ 変形の描画~model＠~TRANSFORM#transform-rendering$
を見よ。
◎
All the usual effects of having a transform apply (such as creating a stacking context, etc.) See CSS Transforms 1 § 3 The Transform Rendering Model for details.
</dd>
	<dd>
省略された場合の既定は、
`inset(0 round <var>X</var>)^v になる
— ここで %X は、
この要素~用の`包含塊$を確立した要素~上の `border-radius$p の算出d値になるとする。
◎
If &lt;offset-path&gt; is omitted, it defaults to inset(0 round X), where X is the value of border-radius on the element that establishes the containing block for this element.＼
↓↓ If &lt;coord-box&gt; is omitted, it defaults to border-box.
</dd>
	<dd>
<p>
各~成分の解釈は、
以下に従う：
◎
See the specific values (below) for the interpretation of each component.
</p>
		<dl>
			<dt id="valdef-offset-path-ray">`ray()$t</dt>
			<dd>
`~offset~path$は、
`射線$になる。
詳細は
`§ <code class="value">ray()</code> 関数＠#ray-function$
を見よ。
◎
The offset path is a line extending from the origin at some angle. See § 2.1.1 The ray() Function for details.
</dd>
			<dd>
`coord-box$t は、
当の`射線$用の`基準box$を供する。
◎
The &lt;coord-box&gt; provides the reference box for the ray.
</dd>

			<dt id="valdef-offset-path-url">`url$t</dt>
			<dd>
所与の~URLは，ある~SVG`図形~要素$ `SVG2$r への~URL参照になる場合、
`~offset~path$は，参照された要素に`等価な~path$0になる。
◎
A URL reference to an SVG shape element. The offset path is the referenced element’s equivalent path. [SVG2]
</dd>
			<dd>
他の場合
（`無効な参照＠~SVGlinking#TermInvalidReference$である場合）、
代わりに，
`path("m 0 0")^v （ある `basic-shape$t ）として挙動する。
◎
If the URL does not reference a shape element (because it references a different element, or resolves to a non-SVG document, or doesn’t resolve at all, etc) this behaves as path("m 0 0") (a &lt;basic-shape&gt;) instead.
</dd>
			<dd>
`coord-box$t は、
当の`図形~要素$用の［
`表示域~座標系$, `利用元~座標系$
］を定義する
— その原点は左上~隅にあり，~sizeにおける単位は `1px^v とする。
◎
The &lt;coord-box&gt; defines the viewport and user coordinate system for the shape element, with the origin (the 0,0 point) at the top left corner, and units being 1px in size.
</dd>

			<dt id="valdef-offset-path-basic-shape">`basic-shape$t</dt>
			<dd>
`~offset~path$は、
当の `basic-shape$t 関数に`等価な~path$になる。
◎
The offset path is the equivalent path of the &lt;basic-shape&gt; function.
</dd>
			<dd>
<p>
`basic-shape$t を成す各~関数のうち，
<code class="prod">`at^v `position^t</code>
引数を受容するものに対しては、
その引数が省略された場合，
その引数~用には次が利用される：
</p>
				<ul>
					<li>
当の要素は `offset-position$p を介して`開始~時の~offset位置$を定義する場合、
それ
</li>
					<li>
他の場合、
当の関数~用に指定された既定。
</li>
				</ul>
◎
For all &lt;basic-shape&gt;s, if they accept an at &lt;position&gt; argument but that argument is omitted, and the element defines an offset starting position via offset-position, it uses the specified offset starting position for that argument. Otherwise it defaults as specified for each function.
</dd>
			<dd>
`coord-box$t は、
`basic-shape$t 用の`基準box$を供する。
◎
The &lt;coord-box&gt; provides the [=/reference box=] for the &lt;basic-shape&gt;.
</dd>
		</dl>
	</dd>

	<dt id="valdef-offset-path-coord-box">`coord-box$t</dt>
	<dd>
`offset-path$t は、
この引数が定義する~boxの中で~sizeされる。
◎
Defines the box that the &lt;offset-path&gt; sizes into.
</dd>
	<dd>
~CSS文脈においては、
参照されるのは，［
この要素~用に`包含塊$を確立する要素
］用の~boxである。
【例えば `content-box^v ならば、包含塊を確立する要素の内容~box, 等々】
◎
In CSS contexts, the boxes being referenced are from the element that establishes the containing block for this element.
</dd>
	<dd>
~SVG文脈においては、
すべての値は `view-box$v として挙動する。
◎
In SVG contexts, all values behave as view-box.
</dd>
	<dd>
省略された場合の既定は、
`border-box^v になる。
◎
↑↑
</dd>
</dl>


			<section id="ray-function">
<h4 title="The ray() Function">2.1.1. `ray^f 関数</h4>

<p>
`ray$f 関数は、
`~offset~path$を
`射線@
— ある点から ある角度で出ている真直な線 —
として定義する：
◎
The ray() function defines an offset path as a straight line emerging from a point at some defined angle:
</p>

<pre class="prod">
`ray()@t
	= ray( `angle$t &amp;&amp; `ray-size$t? &amp;&amp; `contain$v? &amp;&amp; [at `position$t]? )

`ray-size@t
	= `closest-side^v
	| `closest-corner^v
	| `farthest-side^v
	| `farthest-corner^v
	| `sides^v
</pre>

<p>
以下の記述においては
⇒＃
%要素 は，この関数を `offset-path$p に利用している要素を指す。
%包含塊 は， %要素 の`包含塊$を指す。
</p>

<p>
`ray$f 関数の各~引数は：
◎
Its arguments are:
</p>

<dl class="valdef">
	<dt id="valdef-ray-angle">`angle$t</dt>
	<dd>
`射線$が始点から出る方向を指定する。
`~gradient関数$と同じく，
値は方角を与える角度として解釈される
⇒＃
`0deg^v は真上を指す。
正な角度は時計回りな回転を表現する。
◎
The offset path is a single line segment that starts from the offset starting position and proceeds in the direction defined by the specified &lt;angle&gt;. (Its length is determined by the other arguments.) As with gradient functions, &lt;angle&gt; values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation.
</dd>

	<dt id="valdef-ray-ray-size">`ray-size$t</dt>
	<dd>
`射線$の`総-長さ$【！(the distance between...】
（`~offset距離$【！`offset-distance$p】 0% の所から 100% の所までの距離）
を %包含塊 に相対的に指定する。
◎
Specifies the length of the offset path (the distance between the offset-distance: 0% and offset-distance: 100% points) relative to the containing box.
</dd>
	<dd>
指定されない場合の既定は、
`closest-side$v になる。
◎
If no &lt;ray-size&gt; is specified it defaults to closest-side.
</dd>
	<dd class="note">注記：
この値が `sides$v をとる場合、
距離は，指定された `angle^t に依存する
— 他の場合は `angle^t に依存しない。
◎
Note: For sides, the distance depends on the &lt;angle&gt; specified; for all other values, the distance is constant regardless of the &lt;angle&gt;.
</dd>
	<dd>
<p>
個々の~keywordは：
◎
Individual keywords are:
</p>
		<dl class="valdef">
			<dt>`closest-side@v</dt>
			<dd>
始点から %包含塊 の各~側のうち最も近い所までの距離。
◎
The distance from the ray’s starting point to whichever side of the containing block is closest.
</dd>

			<dt>`closest-corner@v</dt>
			<dd>
始点から %包含塊 の各~隅のうち最も近い所までの距離。
◎
The distance from the ray’s starting point to whichever corner of the containing block is closest.
</dd>

			<dt>`farthest-side@v</dt>
			<dd>
始点から %包含塊 の各~側のうち最も遠い所までの距離。
◎
The distance from the ray’s starting point to whichever side of the containing block is farthest.
</dd>

			<dt>`farthest-corner@v</dt>
			<dd>
始点から %包含塊 の各~隅のうち最も遠い所までの距離。
◎
The distance from the ray’s starting point to whichever corner of the containing block is farthest.
</dd>

			<dt>`sides@v</dt>
			<dd>
始点から［
`射線$が %包含塊 の境界に交差する点
］までの距離。
◎
The distance from the ray’s starting point to the point where the offset path intersects the containing block’s boundary.
</dd>
			<dd>
始点が %包含塊 の境界~上か外側にある場合、
距離は 0 になる。
◎
If the ray’s starting point is on the containing block’s boundary, or outside its bounds entirely, the distance is zero.
</dd>
		</dl>
	</dd>
	<dd class="note">注記：
［
`closest-side$v ／ `closest-corner$v
］に対しては、
`射線$の始点が［
辺／隅
］に一致しているならば，それが最も近いものになる
（言い換えれば、
距離は 0 になる）。
◎
Note: For closest-side and closest-corner, if the ray’s starting point is on an edge/corner, that’s the closest one. (In other words, the distance is zero.)
</dd>
	<dd class="note">注記：
［
`closest-side$v ／ `farthest-side$v
］に対しては、
`射線$の始点が %包含塊 の外側にあるならば，
%包含塊 の各~辺は無限に延伸するものと見なされる。
◎
Note: For closest-side and farthest-side, if the ray’s starting point is outside the containing block entirely, the edges of the containing block are considered to extend out to infinity.
</dd>

	<dt>`contain@v</dt>
	<dd class="trans-note">【
この~keywordに関する一部の記述は、
不明瞭な箇所がいくつもあるので（ `363$issue ），
当面の間は未訳。
】</dd>
	<dd>
`射線$の長さは， %要素 が %包含塊 の中に居続けるよう抑制される
— `~offset距離$【！`offset-distance$p】 `100%^v の所でも。
◎
The length of the offset path is reduced so that the element stays within the containing block even at offset-distance: 100%.
◎
Specifically, the path’s length is reduced by half the width or half the height of the element’s border box, whichever is larger, and floored at zero.
</dd>
	<dd class="note">
<div>
<p>注記：
この挙動は、
~AND↓ が満たされる事例に最適化したものである：
</p>
		<ul>
			<li>
%要素 の横幅と縦幅は，ほぼ等しい
</li>
			<li>
%要素 の~borderは `border-radius$p により完全に丸められたか，その各~隅は %要素 の外観には関連していない
</li>
			<li>
`ray-size$t として `closest-side$v が利用されている
</li>
			<li>
%要素 の `offset-anchor$p は `center^v に設定されている
</li>
		</ul>
◎
This behavior is optimized for a particular case—the element’s width and height are equal or nearly so; the element is either completely rounded by border-radius or the corners aren’t relevant to its appearance; the ray() uses closest-side positioning; and offset-anchor is set to center.
</div>

<p>
これらは、
%要素 を丸い時計の文字盤の周辺近くに位置する様な状況
【`例＠#_clock-face$】
において共通的に満たされる。
これらの条件の下では、
この値は，次を確保する
⇒
%要素 は、
`~offset距離$【！`offset-distance$p】 100% にて
文字盤の内縁~辺にきっちりはまるよう位置される。
◎
Under these conditions, which are common for situations like positioning elements around the edge of a round clock face, this ensures that each element is positioned fairly snugly against the inner edge of the clock face at offset-distance: 100%.
</p>

<p>
他の条件においても，`類似に^em動作することになるが、
さほど最適な結果を与えないかもしれない。
◎
In other conditions this will act similarly but might not give quite as optimal a result.
</p>
	</dd>

	<dt id="valdef-ray-at-position">`at^v `position$t</dt>
	<dd>
`射線の原点@
— `射線$の始点（ 0% 位置） —
を指定する。
それは、
`position$t を利用して，
%包含塊 の中で縦横とも~size 0 の~obj区画を位置することにより解決される。
◎
Specifies the origin of the ray, where the ray’s line begins (the 0% position). It’s resolved by using the &lt;position&gt; to position a 0x0 object area within the box’s containing block.
</dd>
	<dd>
省略された場合の始点は、
%要素 に`開始~時の~offset位置$（ `offset-position$p ）が指定された場合は，それを利用する
— 他の場合、
`at center^v として挙動する。
◎
If omitted, it uses the offset starting position of the element, given by offset-position.
◎
If the element doesn’t have an offset starting position either, it behaves as at center.
</dd>
	<dd class="note">注記：
現時点では、
`ray$f は`~offset~path$以外には利用-可能でない。
他にも利用-可能になるよう拡張された場合、
`offset-position$p における `ray^f の用法【？】は，もっぱら
`ray^f が`~offset~path$を与えるときに制限されることになる
— 他の `basic-shape$t 関数と類似に。
◎
Note: ray() is currently only usable as an offset path. If it ever gets extended to other uses, its usage of offset-position will be limited solely to when it’s an offset path, similar to other &lt;basic-shape&gt; functions.
</dd>
</dl>

<p class="issue">
以下の各~例は、
すべて書き直す必要がある。
◎
all of these examples need to be rewritten.
</p>

<div class="example">
<p>
ここに，いくつか例を与える。
1 個目の例は、
~boxを成すある部分が包含塊【！`~offset~path$】の外側にあることを示す。
◎
Here are some examples. The first example shows that some parts of boxes are outside of the offset path.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
    }
    .box {
        width: 50px;
        height: 50px;
        offset-position: 50% 50%;
        offset-distance: 100%;
        offset-rotate: 0deg;
    }
    #redBox {
        background-color: red;
        offset-path: ray(45deg closest-side);
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(180deg closest-side);
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="box" id="redBox"&gt;&lt;/div&gt;
    &lt;div class="box" id="blueBox"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset_distance_without_contain^dgm
<figcaption>
`contain$v を伴わない `offset-path$p と~boxの位置
◎
offset-path without contain
</figcaption></figure>

<p>
2 個目の例では、
~overflowを避けるため，
各~boxの `offset-path$p 値に `contain$v が与えられている。
◎
In the second example, contain is given to the offset-path value of each box to avoid overflowing.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
    }
    .box {
        width: 50px;
        height: 50px;
        offset-position: 50% 50%;
        offset-distance: 100%;
        offset-rotate: 0deg;
    }
    #redBox {
        background-color: red;
        offset-path: ray(45deg closest-side contain);
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(180deg closest-side contain);
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="box" id="redBox"&gt;&lt;/div&gt;
    &lt;div class="box" id="blueBox"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset_distance_with_contain^dgm
<figcaption>
`contain$v を伴う `offset-path$p
◎
offset-path with contain
</figcaption></figure>

<p>
3 個目の例では、
当の~boxが包含され得るように~path~sizeが増やされる【？】。
`使用~offset距離$は負になる【？】。
◎
In the third example, the path size is increased so that the box can be contained. The used offset distance is negative.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        transform-style: preserve-3d;
        width: 250px;
        height: 250px;
    }
    .box {
        width: 60%;
        height: 10%;

        offset-position: 20% 20%;
        offset-distance: 0%;
        offset-rotate: 0deg;
        offset-anchor: 200% -300%;
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(-90deg closest-side contain);
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="box" id="blueBox"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`increase-size^dgm
<figcaption>
~path~sizeが増やされた `offset-path$p
◎
offset-path with path size increased
</figcaption></figure>

<p>
4 個目の例においては、
初期~位置は，包含塊の外側にある。
◎
In the fourth example, the initial position is outside the containing block.
</p>

<pre class="lang-html">
&lt;style&gt;
    #container {
        transform-style: preserve-3d;
        width: 200px;
        height: 200px;
    }
    .box {
        width: 20%;
        height: 20%;
        offset-position: 140% 70%;
        offset-distance: 100%;
    }
    #redBox {
        background-color: red;
        offset-path: ray(-90deg sides);
    }
    #blueBox {
        background-color: blue;
        offset-path: ray(180deg closest-side);
    }
&lt;/style&gt;
&lt;div id="container"&gt;
    &lt;div class="box" id="redBox"&gt;&lt;/div&gt;
    &lt;div class="box" id="blueBox"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

<figure>
`initial-outside^dgm
<figcaption>
包含塊の外側にある初期~位置
◎
Initial position outside the containing block
</figcaption></figure>
</div>

			</section>
			<section>
<h4 title="Examples Of &lt;basic-shape&gt; Positioning">2.1.2. `basic-shape^t による位置決めの例</h4>

<div class="example">
<p>
この例は、
暗黙的な中心~位置を伴う真円を利用する。
◎
This example uses a circle with implicit center position.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        width: 323px;
        height: 131px;
        margin: 0px;
        border: 2px solid black;
        padding: 8px;
        transform-style: preserve-3d;
    }
    .item {
        width:  90px;
        height: 40px;
        background-color: violet;
    }
    #middle {
        offset-position: auto;
        offset-path: circle(60%) margin-box;
        offset-distance: 25%;
        offset-anchor: left top;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item" id="middle"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`normal-flow^dgm
<figcaption>
真円の中心は、
通常~flowにより決定される。
◎
The circle center is determined by normal flow.
</figcaption></figure>
</div>

			</section>
			<section>
<h4 title="Examples of &lt;coord-box&gt; Positioning">2.1.3. `coord-box$t による位置決めの例</h4>

<div class="example">
<p>
この例は、
`coord-box$t による`~offset~path$が，
`border-radius$p との組合nにおいて どう働くかを示す。
◎
This example shows how &lt;coord-box&gt; offset path works in combination with border-radius.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        width: 500px;
        height: 300px;
        border-radius: 80px;
        border: dashed aqua;
        margin: 0;
    }
    #blueBox {
        width: 40px;
        height: 20px;
        background-color: blue;
        offset-path: margin-box;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div id="blueBox"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`geometry-box^dgm
<figcaption>
初期~位置は、
上端~横~線の左端【丸められた隅を成す曲線の端】にある。
◎
The initial position is the left end of the top horizontal line.
</figcaption></figure>
</div>

			</section>
		</section>
		<section id="offset-distance-property">
<h3 title="Position On The Path: the offset-distance property">2.2. ~path上の位置： `offset-distance^p ~prop</h3>

◎名 `offset-distance@p
◎値 `length-percentage$t
◎初 `0^v
◎適 `変形-可能な要素$
◎継 されない
◎百 `~offset~path$の`総-長さ$に相対的
◎算 `length-percentage$t の算出d値
◎順 文法に従う
◎ア 算出された値~型による
◎表終

<p>
`~offset距離@
【言い換えれば、 `offset-distance$p の算出d値】
を指定する
— それは、
`~offset位置$が`~offset~path$に沿って どこにあるかを与える。
◎
Specifies where along the offset path the offset position is.
</p>

<dl class="valdef">
	<dt>`length-percentage$t</dt>
	<dd>
`~offset位置$は、
要素の`~offset~path$に沿って指定された距離にある点にある。
~pathに沿う距離を計算する方法についての詳細は、
`§ ~pathに沿って算出される距離の計算-法＠#path-distance$
を見よ。
◎
The offset position is the point that is the specified distance along the element’s offset path. See § 2.2.1 Calculating the computed distance along a path for details about how to calculate distances along a path.
</dd>
	<dd>
百分率は、
`~offset~path$の総-長さに相対的になる。
◎
Percentages are relative to the total length of the offset path.
</dd>
</dl>

<p class="note">注記：
`offset-distance$p を~animateすることにより、
当の要素は複階的な~pathを容易になぞれる。
◎
Note: By animating the offset-distance, an element can easily trace out a complex path.
</p>

<p>
当の要素が`~offset~path$を有さない場合、
この~propは，何もしない。
◎
If the element does not have an offset path, this property does nothing.
</p>

			<section id="path-distance">
<h4 title="Calculating the computed distance along a path">2.2.1. ~pathに沿って算出される距離の計算-法</h4>

<p>
`~offset~path$に沿う距離の処理は、
当の~pathの資質に依存して，異なる演算になる：
◎
Processing the distance along an offset path operates differently depending upon the nature of the offset path:
</p>

<ul>
	<li>
射線の場合、
`contain$v を伴うか否か
◎
References to &lt;angle&gt; offset paths with contain are unclosed intervals.
◎
References to &lt;angle&gt; offset paths without contain are unbounded rays.
</li>
	<li>
<p>
他の場合、
閉な~loopであるか否か。
</p>

<p>
閉な~loopとは、
当の~offset~pathに`等価な~path$0の最終-~commandは `~closepath$pC ~command（ `z^c ／ `Z^c ）であることをいう
— 具体的には：
</p>
		<ul>
			<li>
次に挙げる~SVG要素
⇒
`circle$e, `ellipse$e, `image$e, `polygon$e, `rect$e
</li>
			<li>
`basic-shape$t のうち［
`path$f ／ `shape$f
］以外のもの（ “基本的な~CSS図形” ）
</li>
			<li>
［
`path$f ／ `shape$f ／ ~SVG `path$e 要素
］のうち閉な~loopであるもの。
</li>
		</ul>
<p>
次に挙げるものは、
閉な~loopでない（開な~pathである）：
</p>
		<ul>
			<li>
次に挙げる~SVG要素
⇒
`line$e, `polyline$e
</li>
			<li>
［
`path$f ／ `shape$f ／ ~SVG `path$e 要素
］のうち閉な~loopでないもの。
</li>
		</ul>
◎
All basic CSS shapes are closed loops.
◎
Offset paths (including references to SVG Paths) are closed loops only if the final command in the path list is a closepath command ("z" or "Z"), otherwise they are unclosed intervals.
◎
References to SVG circles, ellipses, images, polygons and rects are closed loops.
◎
References to SVG lines and polylines are unclosed intervals.
</li>
</ul>

<p>
`使用~offset距離@
【言い換えれば、 `offset-distance$p の使用~値】
を決定する
~algoは、
所与の
( `~offset~path$ %~offset~path, `~offset距離$ %~offset距離 )
に対し：
◎
To determine the used offset distance for a given offset path and offset distance:
</p>
<ol>
	<li>
`総-長さ@
~LET %~offset~path の総-長さ
— すべての下位-~pathも含めた
◎
Let the total length be the total length of offset path with all sub-paths.
</li>
	<li>
%~offset距離 ~SET %~offset距離 を~pixel単位に換算した結果
— 100% は`総-長さ$に対応付ける下で
◎
Convert offset distance to pixels, with 100% being converted to total length.
</li>
	<li>
<p>
~IF［
%~offset~path は`射線$である
］：
</p>
		<ol>
			<li>
~IF［
%~offset~path は `contain$v を伴う
］
⇒
【以下、この段の内容は未訳】
</li>
			<li>
~ELSE
⇒
~RET %~offset距離
</li>
		</ol>
◎
If offset path is an unbounded ray:
• Let used offset distance be equal to offset distance.
◎
Otherwise if offset path is an &lt;angle&gt; path with contain:
• Let used offset distance be equal to offset distance, clamped so that the box lies entirely within the path.
</li>
	<li>
~IF［
%~offset~path は閉な~loopでない
］
⇒
~RET `min^op( %~offset距離, ~pathの総-長さ )
◎
If offset path is any other unclosed interval:
• Let used offset distance be equal to offset distance clamped by 0 and the total length of the path.
</li>
	<li>
<p>
~RET ~pathの総-長さ に応じて
⇒＃
0 ならば 0 ／
~ELSE_ %~offset距離 の~pathの総-長さを法とする剰余
◎
Otherwise offset path is a closed loop:
• Let used offset distance be equal to offset distance modulo the total length of the path. If the total length of the path is 0, used offset distance is also 0.
</p>

<p class="note">注記：
ここでの “剰余” は
伝統的な数学的な定義を利用する
— 出力は、
常に 0 以上になるよう。
◎
Note: “Modulo” here uses the traditional mathematical definition, where the output is always non-negative.
</p>
	</li>
</ol>

<div class="example">
<p>
この例は、
開な~pathに沿って配置された~boxを示す。
◎
This example shows boxes placed along an unclosed interval.
</p>

<pre class="lang-html">
&lt;style&gt;
    .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 0 0 h 200 v 150');
    }
    #box1 {
        background-color: red;
        offset-distance: -280%;
    }
    #box2 {
        background-color: green;
        offset-distance: 190%;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="item" id="box1"&gt;&lt;/div&gt;
    &lt;div class="item" id="box2"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset-distance-unclosed^dgm
<figcaption>
~boxを開な~pathに沿って配置する例
◎
An example of boxes placed along an unclosed interval
</figcaption></figure>
</div>

<div class="example">
<p>
この例は、
閉な~pathに沿って配置された~boxを示す。
◎
This example shows boxes placed along a closed interval.
</p>

<pre class="lang-html">
&lt;style&gt;
    .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 0 0 h 200 v 150 z');
    }
    #box1 {
        background-color: red;
        offset-distance: -280%;
    }
    #box2 {
        background-color: green;
        offset-distance: 190%;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="item" id="box1"&gt;&lt;/div&gt;
    &lt;div class="item" id="box2"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset-distance-closed^dgm
<figcaption>
~boxを閉な~pathに沿って配置する例
◎
An example of boxes placed along a closed interval
</figcaption></figure>
</div>

<div class="example">
<p>
この例は、［
`offset-path$p,
`offset-distance$p
］を利用して，極-座標系の中で~boxを整列する仕方を示す。
◎
This example shows a way to align boxes within the polar coordinate system using offset-path, offset-distance.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        transform-style: preserve-3d;
        width: 300px;
        height: 300px;
        border: dashed gray;
        border-radius: 50%;
    }
    .circleBox {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        background-color: red;
        border-radius: 50%;
    }
    #circle1 {
        offset-path: ray(0deg farthest-side);
        offset-distance: 50%;
    }
    #circle2 {
        offset-path: ray(90deg farthest-side);
        offset-distance: 20%;
    }
    #circle3 {
        offset-path: ray(225deg farthest-side);
        offset-distance: 100%;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="circleBox" id="circle1"&gt;&lt;/div&gt;
    &lt;div class="circleBox" id="circle2"&gt;&lt;/div&gt;
    &lt;div class="circleBox" id="circle3"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`simple_offset_position^dgm
<figcaption>
~boxを極-座標に位置する例
◎
An example of positioning box in polar coordinates
</figcaption></figure>
</div>

			</section>
		</section>
		<section id="offset-position-property">
<h3 title="Starting Point Of The Path: the offset-position property">2.3. ~pathを開始する点： `offset-position^p ~prop</h3>

◎名 `offset-position@p
◎値 `normal$v | `~autoP$v | `position$t
◎初 `normal$v
◎適 `変形-可能な要素$
◎継 されない
◎百 包含塊の~sizeを~~基準にする
◎算 指定された~keyword／ `position$t の算出d値
◎
The normal or auto keywords, or a computed &lt;position&gt;
◎順 文法に従う
◎ア 算出された値~型による
◎表終

<p>
`開始~時の~offset位置@
を指定する
— それは、
`offset-path$t 関数が自前の開始~時の位置を指定しない場合に利用される。
◎
Specifies the offset starting position that is used by the &lt;offset-path&gt; functions if they don’t specify their own starting position.
</p>

<p>
各種 値は、
次に従って定義される：
◎
Values are defined as follows:
</p>

<dl class="valdef">
	<dt>`normal@v</dt>
	<dd>
当の要素には`開始~時の~offset位置$は無い。
◎
The element does not have an offset starting position.
</dd>

	<dt>`~autoP@v</dt>
	<dd>
`開始~時の~offset位置$は、
当の~boxの左上~隅になる。
◎
The offset starting position is the top-left corner of the box.
</dd>
	<dd class="note">注記：
これは、［
要素の`包含塊$ではなく，要素の`自前の~box^em
］の左上~隅になる。
この値は、
`position$t として `top left^v を指定する【！specifiying】こととは，完全に異なる。
この値には、［
例えば， `path$f が当の要素の自前の位置に相対的な所から開始する
］ことを許容することが意味される。
◎
Note: This is the top-left corner of the element’s own box, not that of its containing block! It’s completely different from specifiying top left. It’s meant, for example, to allow a path() to start relative to the element’s own position.
</dd>

	<dt id="valdef-offset-position-position">`position$t</dt>
	<dd>
`開始~時の~offset位置$は、
`position$t を利用して，
~boxの`包含塊$の中で縦横とも~size 0 の~obj区画を位置した結果になる。
◎
The offset starting position is the result of using the &lt;position&gt; to position a 0x0 object area within the box’s containing block.
</dd>
</dl>

<div class="example">
<p>
~boxを `offset-position$p で位置する例。
◎
This example shows positioning a box with offset-position.
</p>

<pre class="lang-html">
&lt;style&gt;
    #wrap {
        position: relative;
        width: 300px;
        height: 300px;
        border: 1px solid black;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 100px;
        left: 80px;
        offset-position: auto;
        offset-anchor: center;
        offset-path: ray(45deg);
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div id="wrap"&gt;
        &lt;div id="box"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset_position_auto^dgm
<figcaption>
`offset-position$p に `~autoP$v を与えたときの例
◎
An example when auto is given to offset-position
</figcaption></figure>
</div>

<div class="example">
<p>
この例は［
`transform$p ~prop／
個々の変形~prop（ `rotate$p ）
］との相互作用を示す。
~motion~path変形は、
( `left$p, `top$p ) を `offset-position$p へ縦に移動する並進になる。
◎
This example shows the interaction with the transform property, and with an individual transform property (rotate). The motion path transform is a vertical translation moving (left, top) to offset-position.
</p>

<pre class="html-code">
&lt;style&gt;
    #wrap {
        transform-style: preserve-3d;
        width: 400px;
        height: 350px;
    }
    .item {
        position: absolute;
        left: 200px;
        top: 0px;
        offset-position: 200px 100px; /* <span class="comment">
( 0px【？】, 100px ) だけ並進する
◎
translates by 0px,100px
</span> */
        offset-anchor: left top;
        transform-origin: left top;
        width: 130px;
        height: 80px;
        border-top-right-radius: 23px;
    }
    #box1 {
        background-color: tomato;
        offset-position: auto;
    }
    #box2 {
        background-color: green;
    }
    #box3 {
        background-color: navy;
        rotate: 90deg; /* <span class="comment">
~motion~path変形より前に適用される
◎
applied before motion path transform
</span> */
    }
    #box4 {
        background-color: gold;
        transform: rotate(90deg); /* <span class="comment">
~motion~path変形より後に適用される
◎
applied after motion path transform
</span> */
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div id="wrap"&gt;
        &lt;div class="item" id="box1"&gt;&lt;/div&gt;
        &lt;div class="item" id="box2"&gt;&lt;/div&gt;
        &lt;div class="item" id="box3"&gt;&lt;/div&gt;
        &lt;div class="item" id="box4"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`position-transform^dgm
<figcaption>
~motion~pathと他の変形が相互作用するときの例
◎
An example when motion path and other transforms interact
</figcaption></figure>
</div>

<div class="example">
<p>
この例は `position$p に `static$v を利用するので、
 `offset-position$p は通常~flow位置からの並進を生成する。
`scale$p を利用して これらの並進を増幅することにより、
通常~flowは，
`offset-position$p の周りで 180° 回転され【なぜ？】，
~boxどうしは互いに離れていく。
◎
This example uses position static, so offset-position generates translations from the normal flow positions. By amplifying these translations using scale, the normal flow is rotated 180 degrees around the offset-position, and the boxes are exploded away from each other.
</p>
<pre class="html-code">
&lt;style&gt;
    #wrap {
        transform-style: preserve-3d;
        width: 500px;
        height: 250px;
        line-height: 0px;
    }
    span {
        position: static;
        display: inline-block;
        width: 100px;
        height: 50px;
        border-top-right-radius: 23px;
        scale: 2.5 2.5; /* <span class="comment">
~motion~path変形より前に適用される
◎
applied before motion path transform
</span> */
        offset-position: center;
        transform: scale(0.4); /* <span class="comment">
~motion~path変形より後に適用される
◎
applied after motion path transform
</span> */
    }
    #box1 {
        background-color: tomato;
    }
    #box2 {
        background-color: green;
    }
    #box3 {
        background-color: navy;
    }
    #box4 {
        background-color: gold;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div id="wrap"&gt;
        &lt;div&gt;
            &lt;span id="box1"&gt;&lt;/span&gt;&lt;span id="box2"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;span id="box3"&gt;&lt;/span&gt;&lt;span id="box4"&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`position-scale^dgm
<figcaption>
~motion~pathと `scale$p が相互作用するときの例
◎
An example when motion path and scale interact
</figcaption></figure>
</div>

<div class="example">
<p>
この例では、
各 `offset-position$p の値は無視される
— `offset-path$p は `geometry-box$t であるが、
他の~offset~propは，
—  `offset-position$p: `right bottom^v 用の `that^en に等価な効果を有するよう組合せるので【？】。
◎
In this example, each offset-position value is ignored as offset-path is a &lt;geometry-box&gt;, but the other offset properties combine to have an effect equivalent to that for offset-position 'right bottom'.
</p>
<pre class="html-code">
&lt;style&gt;
    #wrap {
        transform-style: preserve-3d;
        width: 540px;
        height: 420px;
    }
    .item {
        position: absolute;
        width: 90px;
        height: 70px;
        border-top-right-radius: 23px;
        scale: 0.8 0.8; /* <span class="comment">
~motion~path変形より前に適用される
◎
applied before motion path transform
</span> */
        offset-path: padding-box;
        offset-distance: 50%;
        offset-rotate: 0deg;
        offset-anchor: right bottom;
        transform: scale(1.25); /* <span class="comment">
~motion~path変形より後に適用される
◎
applied after motion path transform
</span> */
    }
    #box1 {
        background-color: tomato;
        position: static;
        offset-position: auto; /* <span class="comment">
無視される
◎
ignored
</span> */
    }
    #box2 {
        background-color: green;
        right: 0px;
        top: 0px;
        offset-position: 23% 45%; /* <span class="comment">
無視される
◎
ignored
</span> */
    }
    #box3 {
        background-color: navy;
        left: 0px;
        bottom: 0px;
        offset-position: 34% 56px; /* <span class="comment">
無視される
◎
ignored
</span> */
    }
    #box4 {
        background-color: gold;
        right: 0px;
        bottom: 0px;
        offset-position: 45px 67px; /* <span class="comment">
無視される
◎
ignored
</span> */
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div id="wrap"&gt;
        &lt;div class="item" id="box1"&gt;&lt;/div&gt;
        &lt;div class="item" id="box2"&gt;&lt;/div&gt;
        &lt;div class="item" id="box3"&gt;&lt;/div&gt;
        &lt;div class="item" id="box4"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`position-absolute^dgm
<figcaption>
`offset-position^p が無視される例
◎
An example when offset-position is ignored
</figcaption></figure>
</div>

		</section>
		<section id="offset-anchor-property">
<h3 title="The Element’s Anchor Point: the offset-anchor property">2.4. 要素の~anchor点： `offset-anchor^p ~prop</h3>

◎名 `offset-anchor@p
◎値 `~autoA$v | `position$t
◎初 `~autoA$v
◎適 `変形-可能な要素$
◎継 されない
◎百 要素の`基準box$の［
横幅, 縦幅
］に相対的
◎算 ~keyword `~autoA$v ／
`position$t の算出d値
◎順 文法に従う
◎ア 算出された値~型による
◎表終

<p>
要素の
`~anchor点@
を指定する
— それは、
`~offset~path$に沿って`~offset位置$と整列される点を定義する。
◎
Defines the element’s offset anchor point—the point that is aligned with the offset position along the offset path.
</p>

<p>
各種 値の意味は：
◎
Values have the following meanings:
</p>

<dl class="valdef">
	<dt>`~autoA@v</dt>
	<dd>
`~anchor点$は、
`transform-origin$p の`算出d値$
— 特定的には、
その値を `position$t として当の要素の`基準box$を基準に解決した結果 —
により指示される点になる。
◎
The anchor point is the same as the point indicated by transform-origin.
◎
Specifically, the computed value of transform-origin is resolved as a &lt;position&gt; against the element’s reference box.
</dd>

	<dt id="valdef-offset-anchor-position">`position$t</dt>
	<dd>
`~anchor点$は、
所与の `position$t を当の要素の`基準box$を~~基準に解決した結果になる。
◎
The anchor point is the result of resolving the &lt;position&gt; against the element’s reference box.
</dd>
</dl>

<p class="issue">
これが どの~boxを~~基準に解決されるかは、
`503$issue にて論じられている。
◎
Which box this is resolved against is being discussed in Issue 503.
</p>

<div class="example">
<p>
~boxの`~anchor点$を設定する方法を説明する例。
◎
The following explains how to set the anchor point of the box.
</p>

<pre class="lang-css">
#plane {
    offset-anchor: center;
}
</pre>

<p>
図形の真中にある赤い丸は、
`~anchor点$を指示する。
◎
The red dot in the middle of the shape indicates the anchor point of the shape.
</p>

<figure>
`plane^dgm
<figcaption>
飛行機~図形の真中にある赤い丸は、
`~anchor点$を指示する。
◎
A red dot in the middle of a plane shape indicates the shape’s anchor point.
</figcaption></figure>
</div>

<div class="example">
<p>
この例は、
異なる`~anchor点$を伴う 4 個の~boxの整列を示す。
◎
This example shows an alignment of four boxes with different anchor points.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        transform-style: preserve-3d;
        width: 300px;
        height: 300px;
        border: 2px solid gray;
        border-radius: 50%;
    }
    .box {
        width: 50px;
        height: 50px;
        background-color: orange;
        offset-position: 50% 50%;
        offset-distance: 100%;
        offset-rotate: 0deg;
    }
    #item1 {
        offset-path: ray(45deg closest-side);
        offset-anchor: right top;
    }
    #item2 {
        offset-path: ray(135deg closest-side);
        offset-anchor: right bottom;
    }
    #item3 {
        offset-path: ray(225deg closest-side);
        offset-anchor: left bottom;
    }
    #item4 {
        offset-path: ray(315deg closest-side);
        offset-anchor: left top;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="box" id="item1"&gt;&lt;/div&gt;
    &lt;div class="box" id="item2"&gt;&lt;/div&gt;
    &lt;div class="box" id="item3"&gt;&lt;/div&gt;
    &lt;div class="box" id="item4"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset_anchor^dgm
<figcaption>
様々な `offset-anchor$p の例
◎
An example of offset-anchor
</figcaption></figure>
</div>

<div class="example">
<p>
この例は、
中心が `offset-position$p に~~一致する~boxを示す。
◎
This example shows boxes centered at their offset-position.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        width: 500px;
        height: 500px;
    }
    .box {
        background-color: mediumpurple;
        offset-path: none;
        offset-anchor: center;
    }
    #item1 {
        offset-position: 90% 20%;
        width: 60%;
        height: 20%;
    }
    #item2 {
        offset-position: 100% 100%;
        width: 30%;
        height: 10%;
    }
    #item3 {
        offset-position: 50% 100%;
        width: 20%;
        height: 60%;
    }
    #item4 {
        offset-position: 0% 100%;
        width: 30%;
        height: 90%;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="box" id="item1"&gt;&lt;/div&gt;
    &lt;div class="box" id="item2"&gt;&lt;/div&gt;
    &lt;div class="box" id="item3"&gt;&lt;/div&gt;
    &lt;div class="box" id="item4"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset_anchor_center^dgm
<figcaption>
`offset-anchor^p に `center^v を与えたときの例
◎
An example of 'offset-anchor: center'
</figcaption></figure>
</div>

<div class="example">
<p>
この例は、
`offset-anchor$p が，どう `offset-position^en に算出するかを示す
【 `offset-position$p？ `~offset位置$？】。
◎
This example shows how offset-anchor computes to their offset-position.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        width: 500px;
        height: 500px;
    }
    .box {
        background-color: mediumpurple;
        offset-path: none;
        offset-anchor: auto;
    }
    #item1 {
        offset-position: 90% 20%;
        width: 60%;
        height: 20%;
    }
    #item2 {
        offset-position: 100% 100%;
        width: 30%;
        height: 10%;
    }
    #item3 {
        offset-position: 50% 100%;
        width: 20%;
        height: 60%;
    }
    #item4 {
        offset-position: 0% 100%;
        width: 30%;
        height: 90%;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="box" id="item1"&gt;&lt;/div&gt;
    &lt;div class="box" id="item2"&gt;&lt;/div&gt;
    &lt;div class="box" id="item3"&gt;&lt;/div&gt;
    &lt;div class="box" id="item4"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure>
`offset_anchor_auto^dgm
<figcaption>
`offset-anchor^p に `auto^v を与えたときの例
◎
An example of 'offset-anchor: auto'
</figcaption></figure>
</div>

		</section>
		<section id="offset-rotate-property">
<h3 title="Rotating To Match The Path: the offset-rotate property">2.5. ~pathに合致するための回転-法： `offset-rotate^p ~prop</h3>

◎名 `offset-rotate@p
◎値 [ `~autoR$v | `reverse^v ] || `angle$t
◎初 `~autoR$v
◎適 `変形-可能な要素$
◎継 されない
◎百 受容しない
◎算 ( 省略可能な `~autoR$v, `angle$t の算出d値 ) が成す組
◎
computed &lt;angle&gt; value, optionally preceded by auto
◎順 文法に従う
◎ア 算出された値~型による
◎表終

<p>
`~offset変形$の回転~成分を定義する
— 場合によっては、
`~offset~path$の`~offset位置$における方向に基づくよう。
◎
Defines a rotation component of the offset transform, possibly based on the direction of the offset path at the offset position. Values have the following meanings:
</p>

<div>
<p>
回転~成分は、
`angle$t に指定された角度
— 省略時は 0° —
に指定された~keywordが指示する角度
— 省略時は 0° —
を加算した結果になる。
~keywordが指示する角度は：
</p>
<dl>
	<dt>`~autoR@v</dt>
	<dd>
［
X 軸の正な方向（すなわち，右へ向かって伸びる線）
］から時計回りに［
`~offset~path$の`~offset位置$における方向
］までが成す角度。
</dd>

	<dt>`reverse@v</dt>
	<dd>
`~autoR$v が指示する角度に `180deg^v を加算した結果。
</dd>
</dl>

◎
auto &lt;angle&gt;?
• The offset transform will have a rotation component equal to the difference between the offset path’s direction at the offset position and the direction of the positive X axis (that is, a line going toward the right). See SVG’s direction of a path for details on how to calculate this.
• If specified with an &lt;angle&gt;, the angle is added to the rotation component.
• Note: In other words, if the offset path is moving to the right, auto doesn’t add any rotation. As it diverges from straight rightward, the rotation matches. By combining auto with an &lt;angle&gt;, you can adjust the "starting" rotation.
◎
reverse &lt;angle&gt;?
• Identical to auto, but adds an additional 180deg to the rotation.
◎
&lt;angle&gt;?
• When specified on its own, adds a rotation component to the offset transform of the specified angle. (That is, offset-rotate: 45deg; is similar to transform: rotate(45deg); it’s just ordered to be part of the offset transform.)
</div>

<div class="example">
<p>
以下の各~例では、
当の要素が飛行機の図形を利用して示される。
飛行機は、
回転されないときは，右を向いている。
図形の真中にある赤い丸は、
要素の`~anchor点$を指示する。
◎
The following examples use the shape of a plane. The red dot in the middle of the shape indicates the anchor point of the shape.＼
When no offset properties are set, the shape is not translated or rotated along the path.
</p>

<figure>
`offset-initial^dgm
<figcaption>
`offset-position$p が設定されてない下では、
黒い飛行機は~pathの始点にある。
◎
A black plane at the beginning of the path, with no offset properties set.
</figcaption></figure>

<p>
以下においては、
図形の`~anchor点$が，~path上の いくつかの位置に配置される。
◎
When the shape’s anchor point is placed at different positions along the path＼
</p>

<p>
`offset-rotate$p を `0deg^v に設定した場合、
当の図形は，回転されない。
◎
and offset-rotate is 0deg, the shape is not rotated.
</p>

<figure>
`offset-rotate-none^dgm
<figcaption>
~path（青い破線）上の各~位置にある黒い飛行機は、
回転~変形を伴わない。
◎
A black plane at different positions on a blue dotted path without rotation transforms.
</figcaption></figure>

<p>
`offset-rotate$p ~propを `~autoR$v に設定した場合、
図形は，その現在の位置において
— ~pathが進む方向を向くよう —
そこでの勾配に基づいて回転される。
◎
If the offset-rotate property is set to auto, and the shape’s anchor point is placed at different positions along the path, the shape is rotated based on the gradient at the current position and faces the direction of the path at this position.
</p>

<figure>
`offset-rotate-auto^dgm
<figcaption>
~path（青い破線）上の各~位置にある黒い飛行機は、
~pathが進む方向を向くよう回転される。
◎
A black plane at different positions on a blue dotted path, rotated in the direction of the path.
</figcaption></figure>

<p>
`offset-rotate$p ~propを `reverse$v に設定した場合、
~path上の どの位置においても，飛行機は~pathが進む反対~方向を向く。
◎
In this example, the offset-rotate property is set to reverse. The plane faces the opposite direction of the path at each position on the path.
</p>

<figure>
`offset-rotate-reverse^dgm
<figcaption>
~path（青い破線）上の各~位置にある黒い飛行機は、
~pathが進む反対~方向を向くよう回転される。
◎
A black plane at different positions on a blue dotted path, rotated in the opposite direction of the path.
</figcaption></figure>

<p>
`offset-rotate$p ~propを `-45deg^v に設定した場合、
図形は，はじめに反時計回りに 45° だけ回転され，
その回転を~path上の各~位置において保つ。
◎
The last example sets the offset-rotate property to -45deg. The shape is rotated anticlockwise by 45 degree once and keeps the rotation at each position on the path.
</p>

<figure>
`offset-rotate-45^dgm
<figcaption>
~path（青い破線）上の各~位置にある黒い飛行機は、
どこでも固定的な度数だけ回転される。
◎
A black plane at different positions on a blue dotted path, rotated by a fixed amount of degree.
</figcaption></figure>
</div>

<div class="example">
<p>
この例は［
`~autoR$v ／ `reverse$v
］と `angle$t を組合せて指定したとき，どう働くかを示す。
`angle^t の算出d値は、［
`auto^v ／`reverse^v
］の算出d値に加算される。
◎
This example shows how auto or reverse work when specified in combination with &lt;angle&gt;. The computed value of &lt;angle&gt; is added to the computed value of auto or reverse.
</p>

<pre class="lang-html">
&lt;style&gt;
    body {
        width: 300px;
        height: 300px;
        margin: 0px;
        border: solid gray;
        border-radius: 50%;
    }
    .circle {
        offset-position: 150px 150px;
        offset-distance: 86%;
        width: 42px;
        height: 42px;
        background-color: mediumpurple;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #item1 {
        offset-path: ray(0deg closest-side);
        offset-rotate: auto 90deg;
    }
    #item2 {
        offset-path: ray(45deg closest-side);
        offset-rotate: auto 90deg;
    }
    #item3 {
        offset-path: ray(135deg closest-side);
        offset-rotate: auto -90deg;
    }
    #item4 {
        offset-path: ray(180deg closest-side);
        offset-rotate: auto -90deg;
    }
    #item5 {
        offset-path: ray(225deg closest-side);
        offset-rotate: reverse 90deg;
    }
    #item6 {
        offset-path: ray(-45deg closest-side);
        offset-rotate: reverse -90deg;
    }
&lt;/style&gt;
&lt;body&gt;
    &lt;div class="circle" id="item1"&gt;1&lt;/div&gt;
    &lt;div class="circle" id="item2"&gt;2&lt;/div&gt;
    &lt;div class="circle" id="item3"&gt;3&lt;/div&gt;
    &lt;div class="circle" id="item4"&gt;4&lt;/div&gt;
    &lt;div class="circle" id="item5"&gt;5&lt;/div&gt;
    &lt;div class="circle" id="item6"&gt;6&lt;/div&gt;
&lt;/body&gt;
</pre>

<figure id="_clock-face">
`rotate_by_angle_with_auto^dgm
<figcaption>
~boxは、
`~autoR$v 値により回転されることに加え，固定的な度数だけ回転される。
◎
The boxes are rotated by the value of auto with a fixed amount of degree.
</figcaption></figure>
</div>

		</section>
		<section id="offset-shorthand">
<h3 title="The offset Shorthand">2.6. `offset^p 略式</h3>

◎名 `offset@p
◎値 [ `offset-position$tp? [ `offset-path$tp [ `offset-distance$tp || `offset-rotate$tp ]? ]? ]! [ / `offset-anchor$tp ]?
◎初 個々の~propを見よ
◎適 `変形-可能な要素$
◎継 個々の~propを見よ
◎百 個々の~propを見よ
◎算 個々の~propを見よ
◎順 文法に従う
◎ア 個々の~propを見よ
◎表終

<p>
これは、
次に挙げる~propを設定するための略式~propである
— 省略された値は、
各自の初期~値に設定される
⇒＃
`offset-position$p,
`offset-path$p,
`offset-distance$p,
`offset-rotate$p
`offset-anchor$p
◎
This is a shorthand property for setting offset-position, offset-path, offset-distance, offset-rotate and offset-anchor. Omitted values are set to their initial values.
</p>

		</section>
		<section id="transform">
<h3 title="Calculating The Offset Transform">2.7. ~offset変形の計算-法</h3>

<p>
`~offset変形$は、
ある並進にある回転が後続する二次元な変形である：
◎
The offset transform is a 2d transform, a translation followed by a rotation:
</p>

<ul>
	<li>
要素を［
その`~anchor点$,
その`~offset位置$
］が整列するよう並進する。
◎
Translate the element by the (X, Y) that aligns its anchor point with its offset position.
</li>
	<li>
`offset-rotate$p により指定された角度だけ要素を回転する。
◎
Rotate the element by the angle specified by offset-rotate.
</li>
</ul>

		</section>
	</section>
	<section id="paths">
<h2 title="Equivalent Paths For &lt;basic-shape&gt;">3. `basic-shape^t 用の等価な~path</h2>

<p>
`css-shapes$r においては、
`basic-shape$t を成す各~関数を，ある`図形^em
— ［
外形線, 内側, 外側
］を伴う二次元な~~図形 —
を生産するものとして定義する。
◎
The &lt;basic-shape&gt; definition given by [css-shapes] defines each function as producing a shape—a 2-dimensional figure with an outline, an inside, and an outside.
</p>

<p>
この仕様は、
`basic-shape$t を代わりに，`~path^em
— 特定0の図形の外形線をなぞる線であって，［
開始~時の点,
終了~時の点,
方向
］を伴うもの —
を生産するものとして利用する。
何が~pathを成すかの詳細は、
~SVGにより定義される。
`SVG2$r
◎
This specification instead uses &lt;basic-shape&gt; as producing a path—a line with a starting point, ending point, and direction, that happens to trace out a particular shape’s outline. The details of what makes up a path are defined by SVG. [SVG2]
</p>

<p>
以下に挙げる各種 `basic-shape$t 値~用の
`等価な~path@
は、
同じ図形を表現する［
対応する~SVG要素
］用の`等価な~path$0と同じに構成される：
◎
The equivalent path for all the &lt;basic-shape&gt; values are:
</p>

<div>
<table>
<caption></caption>
<thead><tr>
<th>`basic-shape$t
<th>~SVG要素
</thead><tbody>

<tr><td id="path-equivalent-path">`path$f
<td>`path$e

<tr><td id="shape-equivalent-path">`shape$f
<td>`path$e

<tr><td id="circle-equivalent-path">`circle$f
<td>`circle$e

<tr><td id="ellipse-equivalent-path">`ellipse$f
<td>`ellipse$e

<tr><td id="rect-equivalent-path">`rect$f
<td>`rect$e

<tr><td id="inset-equivalent-path">`inset$f
<td>`rect$e

<tr><td id="xywh-equivalent-path">`xywh$f
<td>`rect$e

<tr><td id="polygon-equivalent-path">`polygon$f
<td>`polygon$e

</tbody></table>


<p class="trans-note">【
原文では，これらの各~図形~用の~pathを概略的に述べているが、
この訳では，単に~SVG図形~要素への参照を与えるだけにする
— 実質的に，それらに定義される等価な~pathと同じであり（下に注記されるとおり）、
それらの記述の方が より精確なので。
】</p>

◎
path()
shape()
• The path is the defined path. [SVG11]
◎
circle()
ellipse()
• The path is the outline of the circle/ellipse. It starts at the rightmost point of the circle/ellipse, and then is composed of four circular arcs, each comprising a quarter of the circle/ellipse, proceeding clockwise, ending with a segment-completing close path operation.
◎
rect()
inset()
xywh()
• The path is the outline of the (possibly-rounded) rectangle, composed of four or eight segments (depending on whether rounded corners are specified or not), and ending with a segment-completing close path operation. It starts at the left end of the top straight edge, immediately to the right of any rounded corners, and continues to the right (clockwise).
◎
polygon()
• The path is the outline of the polygon, composed of straight line segments connecting each coordinate pair to the following coordinate pair, and finally connecting the last back to the first, with a segment-completing close path operation.
</div>

<p>
これらすべてにおける~path上の所与の点における方向は、
~SVGにより定義される
— `SVG2$r `§ ~pathの方向性＠~SVGpaths#PathDirectionality$
を見よ。
◎
For all of these, the direction at any point along the path is defined by SVG; see SVG 2 § 9.4 Path directionality.
</p>

<p class="note">注記：
これらすべては、
類似な~SVG`図形~要素$用に定義される “等価な~path” に合致することが意味される。
◎
Note: All of these are meant to match the "equivalent paths" defined for the similar SVG shape elements.
</p>

<p class="note">注記：
この~listは、
`css-shapes$r にて定義される `basic-shape$t 関数たちが成す集合と全部的に同期cするべきである。
何かが欠落な場合、
仕様の~bugと見なされるべきである。
この~listは，将来には `css-shapes$r へ移動されるかもしれないが、
この仕様だけが この情報を利用しているので，今の所はここに保たれる。
◎
Note: This list should be in sync with the full set of &lt;basic-shape&gt; functions defined in [css-shapes]. If anything is missing, this should be considered a specification bug. This list might move to Shapes in the future, but for now is kept here as this spec is the only consumer of this information.
</p>

	</section>
	<section id="privacy">
<h2 title="Privacy Considerations">4. ~privacyの考慮点</h2>

<p>
この仕様が導入する新たな~privacyの考慮点は、
無い。
◎
This specification introduces no new privacy considerations.
</p>

	</section>
	<section id="security">
<h2 title="Security Considerations">5. ~securityの考慮点</h2>

<p>
この仕様が導入する新たな~securityの考慮点は、
無い。
◎
This specification introduces no new security considerations.
</p>

	</section>
	<section id="changes">
<h2 title="Changes">変更点</h2>

◎非規範的

<dl>
	<dt id="changes-20181218">
`2018年 12月 18日 作業草案＠~TR/2018/WD-motion-1-20181218/$
からの変更点
◎
Changes since the 18 December 2018 Working Draft
</dt>
	<dd>
`offset-position$p 用に［
`offset-path$t の開始~時の位置を上書きしない値
］として `normal^v を追加した。
`ray$f に
<span class="prod">[at `position^t]?</span>
を追加した。
（ `504$issue ）
◎
Added offset-position:normal that doesn’t override the normal position defaulting, and add an "at &lt;position&gt;"" to ray() #504.
</dd>
	<dd>
`offset-path$p を正した
—  `url()^t ではなく `url$t を利用するよう。
（ `508$issue ）
◎
Corrected offset-path to use &lt;url&gt; instead of &lt;url()&gt; #508
</dd>
	<dd>
`~offset変形$の計算を `CSS-TRANSFORMS-1$r の各種用語を利用して言い換えた。
◎
Reworded the calculation of the offset transform, using terminology from CSS Transforms 1
</dd>
	<dd>
`offset-distance$p と `offset-rotate$p を明確化した 
◎
Clarified "offset-distance" and "offset-rotate"
</dd>
	<dd>
~keyword `contain$v の挙動を単純~化して，明確化した。
（ `363$issue ）
◎
Simplified and clarified the behavior of the "contain" keyword #363.
</dd>
	<dd>
［
`circle$f ／ `ellipse$f
］に等価な~pathを~SVGに合致するよう変更した。
（ `506$issue ）
◎
Changed the equivalent path of a circle()/ellipse() to match SVG #506.
</dd>
	<dd>
`coord-box$t が参照する要素は，
変形される要素~用の包含塊を確立している要素になり、
~SVG文脈においては， `coord-box$t は `view-box$v として扱われるものとした。
（ `369＠~FXTFissue/369#issuecomment-1457239856$issue ）
◎
The element being referenced by coord-box is the element establishing the containing block for the transformed element, and in an SVG context coord-box is treated as view-box #369
</dd>
	<dd>
`basic-shape$t に`等価な~path$の定義を`自前の節＠#paths$へ移動した。
◎
Moved the definition of &lt;basic-shape&gt; paths to an appendix.
</dd>
	<dd>
`coord-box$t を任意の~path関数【 `offset-path$t 】と組合せることを許容した
（ `369＠~FXTFissue/369#issuecomment-577787797$issue ）
◎
Allowed &lt;coord-box&gt; to be combined with any of the path functions #369
</dd>
	<dd>
いくつかの課題への~inline~linkを追加した。
（ `503$issue, `504$issue ）
◎
Added inline links to some issues: #503, #504
</dd>
	<dd>
初期~位置を明確化した。
◎
Clarified initial position
</dd>
	<dd>
`path$f を `basic-shape$t 節へ移動した。
【今や `CSS-SHAPES$r にて定義される。】
◎
Moved path() to the &lt;basic-shape&gt; section.
</dd>
	<dd>
`ray-size$t を省略可能にして，
既定では `closest-side$v になるようにした。
◎
Made &lt;ray-size&gt; optional, defaulting to "closest-side".
</dd>
	<dd>
序論を書き直した。
◎
Rewrote introduction.
</dd>
	<dd>
`ray$f の定義を自前の下位節へ移動した。
◎
Moved ray() definition to its own subsection
</dd>
	<dd>
`~offset~path$の定義を明確化した。
（ `66$issue ）
◎
Clarified definition of offset path #66
</dd>
	<dd>
`coord-box$t 型は `CSS-BOX-3$r にて定義されることを明確化した。
◎
Clarified that the &lt;coord-box&gt; tpe is defined in CSS Box 3.
</dd>
	<dd>
`ray()$t, `path()$t 型の構文を正した。
◎
Corrected &lt;ray()&gt; and &lt;path()&gt; type syntax.
</dd>
	<dd>
“剰余” は， C や JS ではなく数学的な定義に基づくことを明確化した。
（ `339$issue ）
◎
Clarified that "modulo" has its mathematical, not C/JS definition #339.
</dd>
	<dd>
尖った~path境界における方向性を~SVGに合致するよう修正した。
（ `209$issue ）
◎
Fixed directionality at sharp path boundaries to match SVG. #209.
</dd>
	<dd>
可読性を良くするため、
`offset-path^p 節を編成し直した。
◎
Reorganized offset-path section for better readability.
</dd>
	<dd>
極-角度の概念を述べている注記を除去した。
◎
Removed note describing the concept of polar angles.
</dd>
	<dd>
`offset-distance$p の算出d値を
`length-percentage$t の算出d値になるよう変更した
◎
Changed computed value of offset-distance to a computed value.
</dd>
	<dd>
~prop定義~表tの “~animate可能” を “~animation型” に置換した。
◎
Replaced animatable by Animation type.
</dd>

	<dt id="changes-20150409">
`2015年 4月 9日 最初の公な作業草案＠~TR/2015/WD-motion-1-20150409/$
からの変更点
◎
Changes since the 9 April 2015 First Public Working Draft
</dt>
	<dd>
`polar-angle＠~TR/2016/WD-css-round-display-1-20160301/#polar-angle-property$p を統合するため，
`motion-path＠~TR/2015/WD-motion-1-20150409/#motion-path-property$p を `offset-path$p に改称した。
◎
Renamed motion-path to offset-path for integrating with polar-angle.
</dd>
	<dd>
`~offset~path$を線~区分として定義するため `ray$f を追加した。
【！which direction is ...】
◎
Added the ray() to define an offset path as a line segment which direction is specified by &lt;angle&gt;.
</dd>
	<dd>
`ray$f 用の引数【！値】として，［
`size^t 【今や `ray-size$t 】, `contain$v
］を追加した。
◎
Added &lt;size&gt; and contain value for the ray().
</dd>
	<dd>
`polar-distance＠~TR/2016/WD-css-round-display-1-20160301/#polar-distance-property$p
を統合するため、
`motion-offset＠~TR/2015/WD-motion-1-20150409/#propdef-motion-offset$p を
`offset-distance$p に改称した。
◎
Renamed motion-offset to offset-distance for integrating with polar-distance.
</dd>
	<dd>
`motion-rotation＠~TR/2015/WD-motion-1-20150409/#propdef-motion-rotation$p を
`offset-rotate$p に改称した。
◎
Renamed motion-rotation to offset-rotate.
</dd>
	<dd>
~pathの`開始~時の~offset位置$を指定するため、
`offset-position$p を追加した
— `CSS-ROUND-DISPLAY-1$r から `polar-origin＠~TR/2016/WD-css-round-display-1-20160301/#polar-origin-property$p を併合することにより。
◎
Added offset-position to specify the offset starting position of the path by merging polar-origin from [CSS-ROUND-DISPLAY-1].
</dd>
	<dd>
要素の`~anchor点$【！原点】を指定するための `offset-anchor$p を追加した
— `CSS-ROUND-DISPLAY-1$r から
`polar-anchor＠~TR/2016/WD-css-round-display-1-20160301/#polar-anchor-property$p を併合することにより。
◎
Added offset-anchor to specify the origin point of the element by merging polar-anchor from [CSS-ROUND-DISPLAY-1].
</dd>
	<dd>
`motion＠~TR/2015/WD-motion-1-20150409/#propdef-motion$p 略式~propを `offset$p に改称した。
◎
Renamed the shorthand property motion to offset.
</dd>
	<dd>
`offset-rotate$p を［
`~autoR$v ／
`reverse$v
］と `angle$t との組合nにより回転~変形nを指定するようにした。
◎
Made offset-rotate specify the rotation transformation by auto or reverse in combination with &lt;angle&gt;.
</dd>
</dl>

	</section>
	<section id="acknowledgments">
<h2 title="Acknowledgments">謝辞</h2>

<p>
`fantasai^en 氏, `Hyojin Song^en 氏, ならびに
他の~CSS~WG~memberたち すべてからの［
考査, ~comment, 訂正
］に謝意を。
◎
Thanks to fantasai, Hyojin Song, and all the rest of the CSS WG members for their reviews, comments, and corrections.
</p>

	</section>
</main></div>